Flutter中使用图片

图片控件开发 Image widget

加载网络图

  new Image.network(
              'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D500/sign=d778213e9225bc312f5d01986ede8de7/d000baa1cd11728bbd9d78d2c3fcc3cec2fd2c8a.jpg',
            ),

加载静态图

 new Image.asset('assets/images/girls.jpg'),

assets/images是我的图片存储路径，当然还是得在pubspec.yaml中配置图片的资源：

 flutter:
    assets:
        - assets/images/robot.jpg
        - assets/images/girls.jpg
        - assets/images/beautifull.jpg

加载本地图片

需要安装插件：path_provider: ^0.5.0+1
首先我得获取图片的相对路径：

	//获取相对路径
  Future _getLocalFile(String fileName) async {
    String dir = (await getExternalStorageDirectory()).path;
    File f = new File("$dir/$fileName");
    return f;
  }

然后放入FutureBuilder中进行展示，示例代码如下：

 //导入本地文件
            new FutureBuilder(
                future: _getLocalFile("Download/Photo/temp.png"),
                builder: (BuildContext context, AsyncSnapshot snapshot) {
                  return snapshot.data != null
                      ? Image.file(snapshot.data)
                      : Image.asset("assets/images/beautifull.jpg");
                })

那个路径可能不对，自己挑好，亲测有效。但是现在留下个问题：在自己的8.1的vivo手机上没能实现,但是在IOS手机上实现OK。问题留下时间是2019年四月九日。。。。。。。。。。。。。。。。。。。。

---

如何设置Placeholder

需要安装插件：transparent_image: ^1.0.0
在使用的页面导入：

import 'package:transparent_image/transparent_image.dart';

示例代码：

 new FadeInImage.memoryNetwork(
              placeholder: kTransparentImage,
              image: 'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D500/sign=d778213e9225bc312f5d01986ede8de7/d000baa1cd11728bbd9d78d2c3fcc3cec2fd2c8a.jpg',
            ),

实现了图片从无到有， placeholder: kTransparentImage,kTransparentImage是资源包里自带的；
下面我要实现自己自定义的、本地的Placeholder

  new FadeInImage.assetNetwork(
             placeholder: 'assets/gif/Mark.gif',
             image: 'https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D500/sign=d778213e9225bc312f5d01986ede8de7/d000baa1cd11728bbd9d78d2c3fcc3cec2fd2c8a.jpg',
           ),

Mark.gif的添加和图片的配置一样；此处省略

如何配置图片缓存

需要安装插件：cached_network_image: ^0.7.0

 new CachedNetworkImage(
                placeholder: (context, url) => new CircularProgressIndicator(),
                imageUrl: 'https://profile.csdnimg.cn/0/1/E/1_mark_chyl',
            ),

断网之后，图片加载会直接从缓存路径上 去加载

如何加载Icon

使用flutter自带的ICON图标：

new Icon(Icons.android,size: 100,),