如何使用带firebase的循环进度指示器

Question

如何在从firestore 提取数据需要时间时使用循环进度指示器

我想要一个转盘里的指示器，以及如何像这个视频中使用的方法一样为指示器提供2种颜色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),
);
});
}