南通网站建设推广优化,推荐营销型网站建设,wordpress搭建公司网站,先进网站flutter开发实战-显示本地图片网络图片及缓存目录图片
在最近开发中碰到了需要显示缓存目录图片#xff0c;这里顺便整理一下#xff0c;显示本地图片、网络图片、缓存目录图片的方法。
一、工程本地图片显示
1 在项目根目录下创建名为 images文件夹#xff0c;也可以将i…flutter开发实战-显示本地图片网络图片及缓存目录图片
在最近开发中碰到了需要显示缓存目录图片这里顺便整理一下显示本地图片、网络图片、缓存目录图片的方法。
一、工程本地图片显示
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?s460v4,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来处理显示图片问题
四、小结
flutter开发实战-显示本地图片网络图片及缓存目录图片。显示本地图片、网络图片、缓存目录图片的几种方法
学习记录每天不停进步。
