flutter 实战 之 自定义icon

 flutter 中的 Icon 一般都是调用 Icon 里面的库，那么如果我们想要自定义一个icon，那么我们应该怎么做呢？

首先，登录 iconfont-阿里巴巴矢量图标库

这里面有很多的 图标 素材，你可以下载，也可以自己上传到 网址。

如果我们看上了一个 icon，我们怎么下载，并且运用到 我们的 flutter 项目里面呢？

我们要是看上了上面的这个icon，就可以 

把这个icon添加进购物车，接着找到右上角的购物车，点击后选择下载代码

 下载完成是这样的一个压缩包

 解压以后找到这两个文件

 然后在自己的flutter项目文件里面新建一个 fonts 文件夹

把这两个文件放进去，
 弄好这些准备工作以后就可以去Android studio 里面进行使用了

 首先要在 pubspec.yaml 文件里面按照格式去配置好我们刚刚复制进来的文件，然后再 Pub  get 
然后我们再打开 json 文件，查看 我们下载的icon的unicode编码（我是由于自己下载了三个 icon，
所以有三个icon的信息）

然后我们要使用的时候最好再新建一个 dart 文件，自定义一个类，且把每个 icon 定义成 static 类型 的 iconData ，方便我们直接通过类名进行使用。

import 'package:flutter/material.dart';

class ItyingFont {
  static const IconData icon1 = IconData(
    0xe6f5,
  fontFamily :"myIcon",
    matchTextDirection: true


  );
  static const IconData icon2 = IconData(
      0xe6f6,
      fontFamily :"myIcon",
      matchTextDirection: true


  );
  static const IconData icon3 = IconData(
      0xe6f7,
      fontFamily :"myIcon",
      matchTextDirection: true


  );




}

 当使用 IconData 属性时，以下是一些常见的属性和中文描述：

1. codePoint（字符编码）：这是指定图标在字体中的 Unicode 编码。
2. fontFamily（字体类型）：用于指定所使用的字体类型的名称。
3. matchTextDirection（文本方向匹配）：用于确定图标是否应该根据文本方向进行翻转，以支持从右到左的文本布局。
4. matchTextDirection（文本方向匹配）：用于确定图标是否应该根据文本方向进行翻转，以支持从右到左的文本布局。
5. hashCode：返回此图标数据对象的哈希码。
6. runtimeType：返回此对象的运行时类型。
7. isSupported（是否受支持）：返回一个布尔值，指示给定字体是否支持此图标数据。
8. toString()：返回一个表示图标数据的字符串。

让我们逐步分析这段代码：

1. 导入 flutter/material.dart 包，这是使用 Flutter 构建应用程序所必需的包。

2. 定义 ItyingFont 类。这是一个包含静态属性的类，意味着你不需要实例化 ItyingFont 类的对象即可访问这些属性。

3. 静态常量 IconData 属性 icon1：

   • 0xe6f5 是图标在字体中的 Unicode 编码点（十六进制表示）。
   • fontFamily 被设置为 "myIcon"，这表示图标将使用名为 "myIcon" 的字体家族来显示。
   • matchTextDirection 被设置为 true，这表示图标将根据文本方向进行翻转，以支持从右到左的文本布局。

4. 静态常量 IconData 属性 icon2 和 icon3 类似于 icon1，但它们分别有不同的 Unicode 编码点（0xe6f6 和 0xe6f7）。

这样，你可以在应用程序中使用这些定义的图标数据，通过 Icon widget 将它们显示出来。例如：
 

Icon(ItyingFont.icon1, size: 30, color: Colors.blue),

上述代码将显示 icon1 定义的图标，并设置大小为 30 像素，颜色为蓝色。