flutter学习二：资源文件images

1. 资源文件创建图片文件

在根目录创建images文件夹。

在pubspec.yaml文件中，放开 assets:注释

flutter:
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/
    - images/mine/
    - images/mine/mine_verifyInfo/
    - images/main/

2. 系统自带Icon图标展示

在pubspec.yaml文件中，dependencies: 依赖下面添加

dependencies:
  flutter:
    sdk: flutter
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2        # 系统自带Icon图标

则在Widget中

Icon(
     Icons.wifi_tethering, 
     size: 16.0, 
     color: Colors.white,
 ),

具体Icon展示样式，我现在是根据展示的英文来显示，具体是否满足还得显示出来查看，有点不确定性。

也可以根据自己切图展示图片比较方便。

3. 常用的展示资源方法

1. 通过Icon显示图片

Icon(
     Icons.wifi_tethering, 
     size: 16.0, 
     color: Colors.white,
 ),

2. 通过本地路径展示图片

Image(
    image: AssetImage("images/mine/mine_setting.png"),
    width: 20.0,
),

3. 网络图片

Image(
  image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
)

or 

Image.network('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')

4. 图标button

IconButton(
     onPressed: (){
             
      },
      icon: Image.asset(
        "images/mine/mine_verifyInfo/verifyInfo.png",
         width: 20,
          color: Colors.white,
       ),
 )

5. 有默认占位符和淡入效果

在图片加载过程中，给用户展示一张默认的图片，能提高用户体验。
使用FadeInImage组件来达到这个功能。FadeInImage能处理内存中，App资源或者网络上的图片。

在flutter pub中搜索"transparent_image", 并根据例子安装相应版本的框架

import 'package:transparent_image/transparent_image.dart';

FadeInImage.memoryNetwork(
  placeholder: kTransparentImage,
  image: 'https://github.com/flutter/website/blob/master/_includes/code/layout/lakes/images/lake.jpg?raw=true',
);

6. 使用缓存图片

在flutter pub中搜索"cached_network_image", 并根据例子安装相应版本的框架, 此框架类似于sdwebImage. 具体使用可以参考其文档

CachedNetworkImage(
        imageUrl: "http://via.placeholder.com/350x150",
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
     ),