我有以下代码在轮播中显示网络图像。启动我的应用程序时,我在轮播中看到空白的白色屏幕。我想显示一个占位符图像。我试图将占位符图像放在if子句下,但是if子句仅在导航到另一个屏幕并返回轮播屏幕时才显示占位符。我希望在启动应用程序时显示占位符。我该如何实现?
return Container(
child: FutureBuilder(
future: getCarouselWidget(),
builder: (context, AsyncSnapshot snapshot) {
List<NetworkImage> list = new List<NetworkImage>();
if (snapshot.connectionState == ConnectionState.waiting || snapshot.connectionState == ConnectionState.active
) {
debugPrint("connection state is " + snapshot.connectionState.toString() );
return new FadeInImage(
height: 200.0, // Change it to your need
width: 300.0, // Change it to your need
fit: BoxFit.cover,
placeholder: new AssetImage("assets/placeholder.jpg"),
image: new AssetImage("assets/placeholder.jpg"),
);
} else if(snapshot.connectionState == ConnectionState.done) {
debugPrint("connection state is inside else" + snapshot.connectionState.toString() );
if (snapshot.hasError) {
return new Text("fetch error");
} else {
for (int i = 0; i < snapshot.data.length; i++) {
//debugPrint("Index is " + idx.toString());
list.add(NetworkImage(snapshot.data[i].data["image"]));
//idx++;
}
return new Container(
height: 250.0,
child: InkWell(
child: new Carousel(
boxFit: BoxFit.cover,
images: list,
onImageTap: (imageIndex) {
Navigator.of(context).push(
new MaterialPageRoute(
builder: (context) => new CustomClass(
name:
snapshot.data[imageIndex].data["title"],
pic: snapshot
.data[imageIndex].data["image"]),
),
);
},
autoplay: false,
dotSize: 4.0,
indicatorBgPadding: 4.0,
animationCurve: Curves.fastOutSlowIn,
animationDuration: Duration(milliseconds: 1000),
)));
}
}
}),
);
答案 0 :(得分:2)
您可以使用cached network image
库,该库提供delay
,placeholder
和淡入淡出动画,例如:
child: new CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
placeholder: new Image.asset('assets/placeholder.jpg'),
errorWidget: new Icon(Icons.error),
fit: BoxFit.fill,
fadeInCurve: Curves.easeIn ,
fadeInDuration: Duration(seconds: 2),
fadeOutCurve: Curves.easeOut,
fadeOutDuration: Duration(seconds: 2),
)