Question

如何在 [![circular progress indicator][1]][1] flutter 中添加文本或百分比，例如加载或 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

Answer 1

我无法完全理解您的问题，但是您可能需要检查：https://pub.dev/packages/percent_indicator

你可以简单地使用它

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

循环进度指示器颤动中的文本或百分比

1 个答案: