flutter中使用自定义的icon

flutter中有许多自带的icon图标，使用也很简单，比如：

1.png

当自带的图标满足不了我们的需求的时候，我们可以尝试自己导入，下面是详细步骤：

1.先从阿里矢量库中选择我们想要的图标，然后加入购物车，最后点击购物车下载代码。

2.png

2.下载下来后在工程的左侧创建一个用来放.ttf文件的文件夹，并命名为fonts。 （命名随意）

3.png

3.打开工程中的pubspec.yaml文件，修改以下内容：
其中：family我们可以随意命名一个字体的名字
asset为刚才我们存放的.ttf文件的路径，注意路径和文件名不要写错

fonts:
    - family: MyIcon
      fonts:
        - asset: fonts/123.ttf

4.创建一个名为CustomIcon.dart的 dart文件。 （命名随意自己取就好）
写入一下代码：

import 'package:flutter/cupertino.dart';

class CustomIcon {
  static const IconData shouye = const IconData(//shouye为图标的名称
      0xe634,//代表的是该图标的代码
      fontFamily: 'MyIcon',//就是我们刚才在pubspec.yaml中设置的字体名称，记得对应上就好
      matchTextDirection: true
  );
  static const IconData fenlei = const IconData(//fenlei为图标名称
      0xe7f9,//代表的是该图标的代码
      fontFamily: 'MyIcon',
      matchTextDirection: true
  );
}

至于图标所对应的代码如何查看，我们可以打开，刚才下载下来的一个名叫demo_index.html的文件，打开后这是这样的：

4.png

关键是后面的4位，前面都是0x。

5.如何使用我们创建的icon？
在使用的地方导入

import 'package:flutter_app/CustomIcon.dart';//引入自己创建的自体库

最后就是如第一张截图那样使用即可。

icon: new Icon(CustomIcon.shouye),