flutter图片控件的使用

ImageWidget，的图片资源有6种

1.网络图片

2.静态图片。就是资源图片

3.本地图片，sd卡图片

4.如何设置placeHolder

5.如何配置图片缓存。

6.如何加载icon。

 

1.加载网络图片

Image.network("http://www.baidu.com/..png"),

2.静态图片。分二步（资源文件）

（1）在pubspec.yaml文件进行声明例如：

assets:
  - img/lake.png

（2）使用

Image(
    image: AssetImage('img/lake.png'),
)

等于

Image.asset('img/lake.png'),

3.加载本地图片

加载绝对路径

（1）import 'dart.io';

（2）Image.file(File('/sdcard/Download/stack.png'));

 

加载相对路径的本地图片

（1）pubSpec.yaml文件中添加 path_provider插件

（2）导入文件头

import 'dart.io';
import 'package:path_provider/path_provider.dart';

Future<File> _getLocalFile(String filename)
async{
    String dir=(await getExternalStorageDirectory()).path;
    File f=new File('$dir/$filename');
    return f;
}

 

4.如何设置placeHolder,（占位符）

  (1) 在pubspec.yaml中添加transparent_image插件

（2）导入

第一种使用

import 'package:transparent_image/transparent_image.dart'

child :FadeInImage.memroyNetwork(
    placeholder:kTransparentImage,
    image:'http://www......png',
)

第二种，加载本地图片作为placeholder

FadeInImage.assetNetwork(

    placeholder:'assets/loading.gif',
    image:'http://www.devio.org/img/avatar.png',

);

5.如何配置图片缓存。 使用cached_network_image插件。

（1）pubSpec.yaml声明依赖。

  插件配置都是在dependencies:下的。

dependencies:

  cached_network_image: 0.6.0+1

(2)使用。

  第一步导包

  第二步

chile:CachedNetworkImage(

    placeholder:(context,url)=>CircularProgressIndicator(),

    imageUrl:'https://xxxx.png',

)

6.如何加载Icon

Material_fonts提供了大量图标

使用Icons，可以使用flutter内置的图标。

（1）导入......./material.dart

  (2)child:Icon(Icons.arrow_back,size:100),

 

7.使用自定义的Icon。

（1）需要构造一个IconData

const IconData(

    this.codePoint,
    this.fontFamily,
    this.fontPackage,

)

（2）pubspec.yaml声明

（3）页面引用，调用