Flutter Images

直接看代码案例快速入手Flutter

本文介绍Image，CachedNetworkImage。

🎉下载GitHub仓库，直接体验

Image比较适合展示静态图片，也可以展示网络图片，但是效果不好，CachedNetworkImage是第三方展示图片库，更适合展示网络图片，设置下载中的占位图和下载失败的占位图。

Image

Image.asset('images/moon.jpg'),
Image.network(
    'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
    width: 200,
),
Image.network(
    'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
    width: 200,
),

CachedNetworkImage

// placeholder and progressIndicatorBuilder cant use together
CachedNetworkImage(
    imageUrl: 'https://example.com/my_image.jpg',
    placeholder: (context, url) =>
        const CircularProgressIndicator(),
    errorWidget: (context, url, error) =>
        Image.asset('images/error_image.png')),

CachedNetworkImage(
    width: 100,
    height: 100,
    imageUrl: 'https://example.com/my_image.jpg',
    progressIndicatorBuilder: (context, url, downloadProgress) =>
        CircularProgressIndicator(value: downloadProgress.progress),
    errorWidget: (context, url, error) =>
        Image.asset('images/error_image.png'))