当前位置：首页 > news >正文

flutter开发实战-显示本地图片网络图片及缓存目录图片

news 2025/7/28 21:38:42

在最近开发中碰到了需要显示缓存目录图片，这里顺便整理一下，显示本地图片、网络图片、缓存目录图片的方法。

一、工程本地图片显示

1 在项目根目录下创建名为 images文件夹，也可以将images放在asserts文件夹下
2.在pubspec.yaml中配置images相关的路径，并执行pub get 使配置的文件生效

在pubspec.yaml文件中

# The following section is specific to Flutter.
flutter:# The following line ensures that the Material Icons font is# included with your application, so that you can use the icons in# the material Icons class.uses-material-design: trueassets:- assets/images/- assets/images/common/- assets/images/icons/

调用本地图片显示代码


Widget _buildLoadingWidget(BuildContext context) {return ImageHelper.wrapAssetAtImages("icons/ic_toast_loading.png",width: 50.0,height: 50.0,);}// ImageHelper.wrapAssetAtImages
static Image wrapAssetAtImages(String name,{double? width, double? height, BoxFit? fit}) {return Image.asset("assets/images/" + name,width: width,height: height,fit: fit,errorBuilder: (context, url, error) =>imageErrorHolder(width: width, height: height),);}

还可以使用AssetImage及Image.asset


Image(image: AssetImage("assets/images/icons/ic_toast_loading.png"),width: 100.0
);Image.asset("assets/images/icons/ic_toast_loading.png",width: 100.0
);

二、显示网络图片

网络图片显示，使用NetworkImage 可以加载网络图片


Image(image: NetworkImage("imageUrl"),width: 100.0,
)

使用Image.network

Image.network("https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",width: 100.0,
)

使用cached_network_image插件实现加载图片

// 处理网络图片的urlstatic Widget imageNetwork({required String imageUrl,double? width,double? height,BoxFit? fit,Widget? placeholder,Widget? errorHolder}) {double? cacheWidth;if (width != null) {cacheWidth = width * 2.0;}double? cacheHeight;if (height != null) {cacheHeight = height * 2.0;}if (!(imageUrl.isNotEmpty && imageUrl.startsWith("http"))) {return Container();}String aCropImageUrl = ImageHelper.formatImageUrl(imageUrl: imageUrl, width: cacheWidth, height: cacheHeight);return CachedNetworkImage(maxWidthDiskCache: cacheWidth?.round(),maxHeightDiskCache: cacheHeight?.round(),imageUrl: aCropImageUrl,fit: fit,width: width,height: height,placeholder: (context, url) => (placeholder ?? Container()),errorWidget: (context, url, error) =>(errorHolder ?? imageErrorHolder(width: width, height: height)),);}static Widget imageErrorHolder({double? width, double? height}) {return Container(width: width,height: height,);}static Widget placeHolder({double? width, double? height}) {return SizedBox(width: width,height: height,child: CupertinoActivityIndicator(radius: min(10.0, width! / 3)));}

三、加载缓存目录图片

当我们将图片保存到Document、Cache目录下，需要将其显示出来，知道的ImagePath，可以使用File(ImagePath)将图片显示出来。

String? imagePath = picArg!['imagePath'];if (imagePath != null) {return Image.file(File(imagePath!),width: widget.width,height: widget.height,fit: BoxFit.cover,);}

当然也可以实现ImageProvider来处理显示图片问题