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

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