如何在 firebase 中使用循環進度指示器

Question

當從 Firestore 中獲取數據需要時間時如何使用循環進度指示器

我想要一個輪播中的那個指示器，以及如何像這個視頻https://youtu.be/O-rhXZLtpv0

這是我的代碼

child: Material(
          borderRadius: BorderRadius.circular(24.0),
          child: SizedBox(
            width: SizeConfig.safeBlockHorizontal * 80,
            height: SizeConfig.safeBlockHorizontal * 80,
            
            child: StreamBuilder<QuerySnapshot>(
            stream: Firestore.instance.collection('About').snapshots(),
            builder: (context, snapshot) {
              if (!snapshot.hasData) {
                return Center(
                  child: CircularProgressIndicator(

                  ),
                );
              }
               else {
               return ListView.builder(
                  
                    itemCount: snapshot.data.documents.length,
                    itemBuilder: (BuildContext context, int index) {
                      _listOfImages = [];
                      for (int i = 0;
                          i < snapshot.data.documents[index].data['image'].length;
                          i++
                          )
                           {
                        _listOfImages.add(Image.network(snapshot
                            .data.documents[index].data['image'][i],fit:BoxFit.fill));
                      }
            return ClipRRect(
              borderRadius: BorderRadius.circular(23.0),
                              child: Container(
                width: SizeConfig.safeBlockHorizontal * 5 ,
                height:SizeConfig.safeBlockVertical * 39,
                child: Carousel(
                  boxFit: BoxFit.fill,
                  dotBgColor: Colors.transparent,
                  dotIncreasedColor: Colors.lightBlue,
                  dotSize: 6.0,
                  images: 
                   _listOfImages

Answer 1

   void initState() {
    _animationController = AnimationController(
          vsync: this,
          duration: Duration(seconds:widget.duration));
    _colorTween = _animationController.drive(
          ColorTween(begin: Colors.yellow,end: Colors.blue));
    _animationController.repeat();
    super.initState();
  }


builder: (context, snapshot) {
              if (!snapshot.hasData) {
                return Center(child: CircularProgressIndicator(valueColor: _colorTween,),);
                }
              }
 

Answer 2

    class Example{
    AnimationController _animationController = AnimationController();
    ColorTween _colorTween = ColorTween();
    
     void initState() {
        _animationController = AnimationController(
              vsync: this,
              duration: Duration(seconds:widget.duration));
        _colorTween = _animationController.drive(
              ColorTween(begin: Colors.yellow,end: Colors.blue));
        _animationController.repeat();
        super.initState();
      }
    
          StreamBuilder<QuerySnapshot>(
            stream: Firestore.instance.collection('About').snapshots(),
            builder: (context, snapshot) {
              if (!snapshot.hasData) {
                return Center(
                  child: CircularProgressIndicator(valueColor=_colorTween),
                );
              });
}