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

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

相关推荐
Yang-Never1 分钟前
ADB -> pull指令拉取手机文件到电脑上
android·adb·android studio
Yang-Never11 分钟前
ADB -> pull指令推送电脑文件到手机上
android·adb·android studio
李新_13 分钟前
我们封装了哪些好用的Flutter Mixin
android·flutter
leluckys25 分钟前
flutter 专题 六十三 Flutter入门与实战作者:xiangzhihong8Fluter 应用调试
前端·javascript·flutter
又菜又爱coding27 分钟前
Flutter异常Couldn‘t find dynamic library in default locations
flutter
帅次27 分钟前
Flutter Expanded 与 Flexible 详解
android·flutter·ios·小程序·webview
流浪汉kylin30 分钟前
Android手机如何腾出存储空间
android
0wioiw01 小时前
Kotlin基础(①)
android·开发语言·kotlin
西瓜本瓜@1 小时前
在 Android 中实现通话录音
android·java·开发语言·学习·github·android-studio
V功夫兔2 小时前
Spring_MVC 高级特性详解与实战应用
java·经验分享·笔记·spring