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

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: true  assets:    - 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.wrapAssetAtImagesstatic 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插件实现加载图片

// 处理网络图片的url  static 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开发实战-显示本地图片网络图片及缓存目录图片。显示本地图片、网络图片、缓存目录图片的几种方法

学习记录，每天不停进步。

来源地址：https://blog.csdn.net/gloryFlow/article/details/131962281