【Flutter】四、Flutter之Icon

APP中难免要使用Icon图标，本文将介绍如何在Flutter中使用Iconfont及自带Icon的使用。

Flutter中自带的Icon可以去这里看：https://material.io/tools/icons/
使用Icon可以创建我们所需要的图标。

一、Icon构造器

const Icon(
    this.icon, {
    Key key,
    this.size,
    this.color,
    this.semanticLabel,
    this.textDirection,
  }) : super(key: key);

二、Icon属性说明

属性	说明
IconData icon	icon数据，可使用Icons.home方式获取，也可以使用IconData(0xe577, fontFamily: ‘MaterialIcons’);
double size	图标大小，默认24.0
Color color	图标颜色
String semanticLabel	语义标签
TextDirection textDirection	图标的文本方向

三、使用IconFont

这里使用阿里矢量库;
有两种使用方法：一种是直接使用tff字体，另一种可通过iconfont_builder插件编译成我们所需要的dart文件。
第一种：直接使用tff字体文件。
1.首先选择要使用的图标，下载代码，如果添加到了项目可选择下载至本地。
2.解压下载的字体文件，找到iconfont.tff，这是我们要使用的字体文件；将该文件添加到项目中，这里我添加到了assets/fonts下，然后配置pubspec.yaml，如下：

fonts:
    - family: iconfont
      fonts:
        - asset: assets/fonts/iconfont.ttf

3.然后就可以使用啦

// 这里的0xe611,0x是固定的，后面的e611可在iconfont中找到，如下图
Icon(IconData(0xe611, fontFamily:'iconfont'))

第二种方法需要借助iconfont_builder来协助我们获取dart文件
1.首先全局安装iconfont_builder

pub global activate iconfont_builder

安装完成后执行，命令行输入iconfont_builder检查是否成功，如果提示需要配置环境变量，按照提示配置环境变量即可。
2.将下载字体中的iconfont.ttf及demo_index.html放到项目中，并在pubspec.yaml中配置字体文件。
3.cd至项目路径中，执行以下代码

iconfont_builder --from ./assets/fonts --to ./lib/fonts/iconfont.dart

这一步是生成iconfont的dart文件，执行成功，则会在/lib/fonts目录下生成iconfont.dart文件
4.引入生成的iconfont.dart文件，就可以使用啦。

Icon(Iconfont.zuzhi)

四、示例代码

import 'package:flutter/material.dart';
import '../fonts/iconfont.dart';
class IconDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Icon(
              Icons.home,
              size: 30.0,
              color: Colors.green,
              semanticLabel: 'label',
              textDirection: TextDirection.rtl,
            ),
            Icon(
              IconData(0xe611, fontFamily: 'iconfont')
            ),
            Icon(
              Iconfont.daiding,
              color: Colors.blue,
            )
          ],
        )
      ],
    );
  }
}