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

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

相关推荐
m0_748233641 分钟前
RabbitMQ 进阶
android·前端·后端
Mr.pyZhang4 小时前
Android构建系统 - 04 编译产物
android·linux
守城小轩10 小时前
Brave 132 编译指南 Android 篇 - 编译准备:系统要求与推荐工具 (三)
android·chrome·chrome devtools·指纹浏览器·浏览器开发·brave
m0_7482384210 小时前
MySQL Workbench菜单汉化为中文
android·数据库·mysql
程序员江同学11 小时前
Kotlin 技术月报 | 2025 年 2 月
android·kotlin
甜于酸12 小时前
MuMu模拟器Pro for Mac 安卓手机平板模拟器
android·macos·智能手机
顾林海15 小时前
深入解析 Android Activity 生命周期
android
XuanRanDev17 小时前
【构建工具】Gradle Kotlin DSL中的大小写陷阱:BuildConfigField
android·开发语言·kotlin
想拿高薪的韭菜17 小时前
计算机网络-双绞线制作
经验分享·笔记·计算机网络·课程设计
l软件定制开发工作室18 小时前
Flutter系列教程之(5)——常用控件Widget的使用示例
flutter