淮北哪里做网站广南网站建设

虽然Flutter有许多内置的icon图标，但是有些特殊功能的话，需要自定义图标或者需要在iconfont 阿里巴巴的图标库里找对应合适的图标。
第一步：在iconfont 阿里巴巴里搜索想要的图标并加入到购物车，点击下载代码后，会生成一些不同格式的字体文件，在Flutter中，我们使用ttf格式即可。

第二步：下载下来解压后的文件，在项目的根目录下新建一个fonts文件夹，把解压文件里的.json和.ttf 文件copy到新建的fonts文件夹中。其中.json文件其实是用不到的，只是为了能更便捷的看到每个字体对应的unicode，后面配置步骤会用到

第三步：在项目的pubspec.yaml文件中找到fonts配置，引入自定义文件，这里首个fonts注意一个空格对齐，也可配置多个字体，替换不同.ttf文件即可

  fonts:- family: Schyler  #指定一个字体名 根据自己的需求定义fonts:- asset: fonts/iconfont.ttf

第四步：在lib目录下新建一个自定义字体文件，我这里的命名是fonts

import 'package:flutter/material.dart';
///自定义一个类 Font
class Font {static const IconData gouwuche = IconData(0x3475,/// 0x+unicode  0x表示是十六进制fontFamily: "Schyler",/// Schyler 就是在`pubspec.yaml`文件里配置自定义的字体名matchTextDirection: true);static const IconData weixin = IconData(0xe856,fontFamily: "Schyler",matchTextDirection: true);
}

第五步：在页面文件中使用

引入字体文件：

import './fonts.dart';

使用：

Icon(Font.gouwuche)

定义多个字体文件，步骤都是一样的，只不过是把解压文件里的.json和.ttf 文件，与已引入的字体文件名做区分，在fonts文件里，重复第四步步骤进行每个icon名字配置。pubspec.yaml文件里的配置如下：

  fonts:- family: Schyler  #指定一个字体名 根据自己的需求定义fonts:- asset: fonts/iconfont.ttf- family: Trajan Pro #第二个自定义字体名fonts:- asset: fonts/TrajanPro.ttf