在flutter中为网络图像添加占位符

Question

我的应用程序中显示了许多网络图像

加载这些图像时。。。屏幕上没有显示任何内容(屏幕保持空白约3-5秒，显示图像的时间(

如何在加载图像时显示加载程序或动画之类的内容

Answer 1

使用Image.network内置属性

Image.network(
"https://www.kindpng.com/imgv/ioJmwwJ_dummy-profile-image-jpg-hd-png-download/",
loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
if (loadingProgress == null) return child;
return Center(
child: CircularProgressIndicator(
value: loadingProgress.expectedTotalBytes != null
? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
: null,
),
);
},
),

Answer 2

尝试使用FadeInImage((，它具有placeHolder和errorPlaceHolder 的属性

Answer 3

您可以使用cached_network_image包。

CachedNetworkImage(
placeholder: (context, url) => Container(color : Colors.red), // Add whatever you want to display.
imageUrl: url,
)

Answer 4

class CachedImage extends StatelessWidget {
final String image;
final double radius;
final double imageWidth;
final double imageHeight;
final double imageArea;
final BoxFit fit;
final Color color;
final String placeHolder;
final double width;
CachedImage({
this.color = colorPrimary,
this.image = '',
this.radius = 30,
this.imageHeight = 70,
this.imageWidth = 70,
this.imageArea = 30,
this.fit = BoxFit.cover,
this.placeHolder = IMG_PLACEHOLDER,
this.width = 1.0,
});
@override
Widget build(BuildContext context) {
return Container(
width: imageWidth,
height: imageHeight,
decoration: BoxDecoration(
border: Border.all(
color: color,
width: width,
),
borderRadius: BorderRadius.circular(radius),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(radius),
child: CachedNetworkImage(
placeholder: (context, url) => Container(
child: Center(
child: CircularProgressIndicator(
valueColor: new AlwaysStoppedAnimation<Color> 
(colorWhite),
),
),
height: imageArea,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10.0))),
),
errorWidget: (context, url, error) => Material(
child: Image.asset(
placeHolder,
width: imageWidth,
height: imageHeight,
fit: BoxFit.fill,
),
borderRadius: BorderRadius.all(Radius.circular(20.0)),
clipBehavior: Clip.hardEdge,
),
imageUrl: image,
width: imageWidth,
height: imageHeight,
fit: fit),
),
);
}
}

您可以使用使用CachedNetworkImage包创建的此自定义小部件。在这种情况下，如果图像未从网络加载，我们将使用CircularProgressBarIndicator，而在网络图像未加载的错误情况下，我们可以使用错误小部件，并可以从资产传递替代图像。

Answer 5

使用此包https://pub.dev/packages/cached_network_image

Widget getNetworkImage({
double? height = 45.0,
double? width = 45.0,
double? borderRadius = 10.0,
bool? showCircularProgressIndicator, //<== this is for loader
required String url,
}) {
return ClipRRect(
borderRadius: BorderRadius.circular(borderRadius ?? 0.0),
child: SizedBox(
height: height,
width: width,
child: CachedNetworkImage(
fit: BoxFit.fill,
imageUrl: url,
placeholder: (context, url) {
showCircularProgressIndicator ??= true;
if (showCircularProgressIndicator == true) {
return Center(
child: Container(
padding: const EdgeInsets.all(7),
decoration: BoxDecoration(color: const Color(0xff0C59EA).withOpacity(0.35), borderRadius: BorderRadius.circular(10)),
));
} else {
return const Center(child: SizedBox());
}
},
errorWidget: (context, url, error) { //<== if you get error in image
return Image.asset(((height ?? 45) >= 100 || (width ?? 45.0) >= 100) ? Assets.imagesCommonPlaceholder : Assets.imagesLogoPlaceholder, fit: BoxFit.cover);//<== use your app placeholder or logo for better UX.
},
),
),
);
}

试着用这种方法。

getNetworkImage(
url: "your-image-url-here",
borderRadius: 15, //<== if you like to give border radius
height: 60, //<== if you like to give height
width: 60, //<== if you like to give width
)