我喜欢淡入图像
我可以做这个
child: FadeInImage.assetNetwork(
image: 'https://placeimg.com/640/480/any',
placeholder: 'assets/images/loading.gif',
),
我想使用FadeInImage
in a BoxDecoration
如下。
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: FadeInImage.assetNetwork(
'${document['image']}'),
fit: BoxFit.cover,
),
),
我收到此错误:
The argument type 'FadeInImage' can't be assigned to the parameter type 'ImageProvider'
我该怎么办呢?
Use Case
在轮播中,在网络加载图像进入之前放入占位符
这是我的轮播小部件(我正在使用carousel_slider
Flutter 包)
Widget _carouselSlider(BuildContext context) {
return StreamBuilder<QuerySnapshot>(
stream: Firestore.instance.collection('events').snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) return new Text('Error: ${snapshot.error}');
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return new Text('Loading...');
default:
return CarouselSlider(
height: 150.0,
enlargeCenterPage: true,
enableInfiniteScroll: false,
items: snapshot.data.documents.map((DocumentSnapshot document) {
print('Listing the documents: $document');
return Builder(
builder: (BuildContext context) {
return GestureDetector(
onTap: () {
print('I am clicked');
Navigator.pushNamed(context, '/detail');
},
child: Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.only(
left: 5.0, right: 5.0, bottom: 20.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
image: DecorationImage(
image: NetworkImage('${document['image']}'),
fit: BoxFit.cover,
),
),
child: Center(
child: Text(
'${document['name']}',
style: TextStyle(fontSize: 16.0),
),
),
),
);
},
);
}).toList(),
);
}
},
);
}
所以,对于部分
image: DecorationImage(
image: NetworkImage('${document['image']}'),
fit: BoxFit.cover,
),
我希望有一种占位符方法,而不仅仅是文本,直到网络加载的图像到达。