【问题标题】:Text or percentage in circular progress indicator flutter圆形进度指示器颤动中的文本或百分比
【发布时间】:2021-09-03 04:22:39
【问题描述】:

如何在 [![圆形进度指示器][1]][1] 颤振中添加 文本或百分比,例如 Loading 或 78%,以获取更多信息清晰的信息我附上了一张图片。

如何在 [![圆形进度指示器][1]][1] 颤振中添加 文本或百分比,例如 Loading 或 78%,以获取更多信息清晰的信息我附上了一张图片。

如何在 [![圆形进度指示器][1]][1] 颤振中添加 文本或百分比,例如 Loading 或 78%,以获取更多信息清晰的信息我附上了一张图片。

    import 'package:photo_view/photo_view.dart';
    import 'package:photo_view/photo_view_gallery.dart';
    import 'package:percent_indicator/percent_indicator.dart';
    
    class Margalla_View_Housing_Scheme extends StatefulWidget {
      @override
      _Margalla_View_Housing_SchemeState createState() => _Margalla_View_Housing_SchemeState();
    }
    class _Margalla_View_Housing_SchemeState extends State<Margalla_View_Housing_Scheme> {
      final imageList = [
        'https://www.arteffectconsultants.com/maps/Islamabad/Margala%20View%20Housing.jpg',
      ];
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.white,
          appBar: AppBar(
            backgroundColor: Colors.deepPurple,
            title: Text("Margalla View Housing Scheme"),
          ),
          // add this body tag with container and photoview widget
          body: Container(
            child: Center(
              child: Container(
                height: 800,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Card(
                    elevation: 20,
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: PhotoViewGallery.builder(
                        itemCount: imageList.length,
                        builder: (context, index) {
                          return PhotoViewGalleryPageOptions(
                            basePosition: Alignment.center,
                            imageProvider: NetworkImage(imageList[index]),
                            minScale: PhotoViewComputedScale.contained * 0.8,
                            maxScale: PhotoViewComputedScale.covered * 5,
    
                          );
                        },
                        scrollPhysics: BouncingScrollPhysics(),
                        backgroundDecoration: BoxDecoration(
                          borderRadius:BorderRadius.all(Radius.circular(20)),
                          color: Theme.of(context).canvasColor,
                        ),
                        enableRotation:true,
                        loadingBuilder: (context, event) => Center(
                          child: Container(
                            width: 90.0,
                            height: 90.0,
                            child: CircularProgressIndicator(
                              strokeWidth: 9.0,
                              backgroundColor:Colors.orange,
                              valueColor: AlwaysStoppedAnimation<Color>(Colors.deepPurple),
                              // semanticsLabel: "Downloading file abc.mp3",
                              // semanticsValue: "Percent " + (100).toString() + "%",
                              value: event == null
                                  ? 0
                                  : event.cumulativeBytesLoaded / event.expectedTotalBytes,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        );
      }
    }```


  [1]: https://i.stack.imgur.com/XBLBV.png

【问题讨论】:

    标签: flutter


    【解决方案1】:

    我无法完全理解您的问题,但是您可能想检查一下:https://pub.dev/packages/percent_indicator

    你可以简单地使用它

    CircularPercentIndicator(
                  radius: 60.0,
                  lineWidth: 5.0,
                  percent: 1.0,
                  center: new Text("100%"),
                  progressColor: Colors.green,
                )
    

    【讨论】:

    • 但是不显示加载或加载完成后的图像,它只生成一个静态页面。
    • 加载图片时,您可以使用 setState 更改文本。在 Text 中使用变量。检查:medium.com/flutter-community/…
    • 问题还是没有解决,能不能加到我的代码里!
    猜你喜欢
    • 1970-01-01
    • 2015-06-03
    • 2020-08-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-10-19
    • 1970-01-01
    相关资源
    最近更新 更多