new CircleAvatar(
backgroundColor: Colors.black87,
backgroundImage: new NetworkImage(url),
radius: 45.0,
)
我想在CircleAvatar 中显示本地图像，直到NetworkImage 从互联网完全加载。
【问题讨论】：
标签： image flutter dart load networkimageview
您可能想尝试将FadeInImage 包裹在ClipOval 中。 FadeInImage 提供了一个 placeholder 属性，您可以在加载网络图像时使用。
注意：ClipOval 经常使用可能会很昂贵，因此请谨慎使用。
【讨论】：
现在有一个新的官方小部件！
首先，在项目根目录下创建一个名为assets的文件夹。
然后，提到pubspec.yaml文件中的文件夹（也可以在项目根目录中找到）：
flutter:
uses-material-design: true
assets:
- assets/
你可以放一张图片，比如把这个写成./assets/loading.gif。
（如果您更改了 assets 文件夹中的文件，热重载将不起作用。请确保完全重新启动应用程序。）
现在可以参考代码中的加载文件：
FadeInImage.assetNetwork(
placeholder: 'assets/loading.gif',
image: 'https://github.com/flutter/website/blob/master/src/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);
更多详情：https://flutter.io/docs/cookbook/images/fading-in-images#from-asset-bundle
【讨论】：
使用StateflWidget，您可以将listener 添加到ImageStream 并覆盖initState 以触发本地图像与完全加载时从互联网获取的图像之间的替换。
我使用了高分辨率图像来显示加载时间：
var _loadImage = new AssetImage(
'assets/img/basic2-090_loader_loading-512.png');
var _myEarth = new NetworkImage(
"http://qige87.com/data/out/73/wp-image-144183272.png");
bool _checkLoaded = true;
@override
void initState() {
_myEarth.resolve(new ImageConfiguration()).addListener((_, __) {
if (mounted) {
setState(() {
_checkLoaded = false;
});
}
});
}
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(child: new Container(
decoration: new BoxDecoration(shape: BoxShape.circle,),
height: 80.0,
width: 80.0,
child: new CircleAvatar(
backgroundColor: Theme
.of(context)
.scaffoldBackgroundColor,
backgroundImage: _checkLoaded ? _loadImage : _myEarth,
),)
)
);
}
}
【讨论】：
解决问题的两种方法
1) 使用 Image.network ： 如果您想在图像加载时显示进度条、simmer 或任何其他小部件。
Image.network(
"URL",
fit: BoxFit.cover,
loadingBuilder: (BuildContext ctx, Widget child, ImageChunkEvent loadingProgress) {
if (loadingProgress == null) {
return child;
}else {
return Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.green),
),
);
}
},
)
2) 使用 FadeInImage ：如果你想在网络图像加载时显示本地图像
FadeInImage.assetNetwork(
image:"URL",
placeholder:"assets/loading.png" // your assets image path
fit: BoxFit.cover,
)
【讨论】：
在加载大图像时，显示备用资源！
new PlutoImage.networkWithPlaceholder("http://68.media.tumblr.com/f7e2e01128ca8eb2b9436aa3eb2a0a33/tumblr_ogwlnpSpcU1sikc68o1_1280.png", new Image.asset("assets/placeholder.png"));
【讨论】：
您可以使用 FadeInImage。
使用资产中的占位符
FadeInImage.assetNetwork(
placeholder: "assets/images/image1.png",
image:"URL"
),
使用内存中的占位符
FadeInImage.memoryNetwork(
placeholder: localImageBytes,
image:"URL"
),
【讨论】：
您也可以使用frameBuilder 属性。好消息：您可以在此处实现自定义占位符小部件。
Image.network('https://example.com/my-image',
height: 100,
frameBuilder: (context, child, frame, _) {
if (frame == null) {
// fallback to placeholder
return MyPlaceholderWidget();
}
return child;
}
)
【讨论】：
我开发了一个名为flutter_url_image_load_fail 的包来定义加载和加载失败小部件：
LoadImageFromUrl(
'https://upload.wikimedia.org/wikipedia/commons/1/17/Google-flutter-logo.png', //Image URL to load
(image) => image, //What widget returns when the image is loaded successfully
() => Text('Loading...'), //What widget returns when the image is loading
(IRetryLoadImage retryLoadImage, code , message){ //What widget returns when the image failed to load
return RaisedButton(
child: Text('Try Again'),
onPressed: (){
retryLoadImage.retryLoadImage(); //Call this method to retry load the image when it failed to load
},
);
},
requestTimeout: Duration(seconds: 5) //Optionally set the timeout
)
【讨论】：
为此，您可以使用Cached network image 包。 CachedNetworkImage 可以直接使用，也可以通过 ImageProvider 使用
像这样创建一个 CircleAvatar
CircleAvatar(
radius: 50,
foregroundColor: Colors.transparent,
backgroundColor: appThemeColor.shade50,
child: CachedNetworkImage(
imageUrl: UserInfoData.instance.getUserImageUrl(),
placeholder: (context, url) => CupertinoActivityIndicator(),
imageBuilder: (context, image) => CircleAvatar(
backgroundImage: image,
radius: 40,
),
errorWidget: (context, url, error) => CircleAvatar(
backgroundColor: Colors.grey,
child: userProfileAvatarPlaceholder,
radius: 40,
),
),
),
【讨论】：
有一个新的cached_network_image 包，其中包含“正在加载”和“错误”图像。连同自动图像缓存。
https://stackoverflow.com/a/57493334/5502121
您可以将任何您想要的内容设置为占位符，例如从您的资产中使用Image.asset('assets/images/my_placeholder.png')
【讨论】：