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

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

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

相关推荐
赵谨言15 分钟前
基于Python的Django框架的手机购物商城管理系统
经验分享·毕业设计
QING61825 分钟前
Kotlin containsValue用法及代码示例
android·kotlin·源码阅读
QING61829 分钟前
Kotlin coerceAtMost用法及代码示例
android·kotlin·源码阅读
QING61831 分钟前
Kotlin commonSuffixWith用法及代码示例
android·kotlin·源码阅读
QING61833 分钟前
Kotlin coerceAtLeast用法及代码示例
android·kotlin·源码阅读
光军oi2 小时前
Mysql从入门到精通day5————子查询精讲
android·数据库·mysql
赵谨言9 小时前
基于Python的Django框架的个人博客管理系统
经验分享·python·毕业设计
鸿蒙布道师10 小时前
鸿蒙NEXT开发Base64工具类(ArkTs)
android·ios·华为·harmonyos·arkts·鸿蒙系统·huawei
Small踢倒coffee_氕氘氚11 小时前
Python实现3D贴图渲染:解锁数字艺术新维度
经验分享·笔记