gpt4 book ai didi

flutter - BoxDecoration 中的 FadeInImage

转载 作者:行者123 更新时间:2023-12-03 04:00:13 24 4
gpt4 key购买 nike

我喜欢 FadeInImage

我可以做这个

child: FadeInImage.assetNetwork(
image: 'https://placeimg.com/640/480/any',
placeholder: 'assets/images/loading.gif',
),

我想使用 FadeInImageBoxDecoration如下。
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'
我该怎么办?

用例

在轮播中,放入占位符,在网络加载的图像进入之前

这是我的轮播小部件(我正在使用 Flutter 的 carousel_slider 包)
  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,
),

我希望有一个占位符的方法,而不是只有文本,直到网络加载的图像到达。

最佳答案

这是代码。

class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: FutureBuilder<bool>(
future: _myFuture(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) return _yourWidget();
return CircularProgressIndicator();
},
)),
);
}

Widget _yourWidget() {
return Stack(
children: <Widget>[
Center(
child: FadeInImage(
width: 300,
height: 300,
placeholder: AssetImage(chocolateImage),
image: NetworkImage(poolImageUrl),
fit: BoxFit.cover,
),
),
Center(child: Text('Pool', style: TextStyle(fontSize: 36.0, color: Colors.white, fontWeight: FontWeight.bold))),
],
);
}

Future<bool> _myFuture() async {
await Future.delayed(Duration(milliseconds: 10500));
return true;
}
}

关于flutter - BoxDecoration 中的 FadeInImage,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57848880/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com