在實際開發過程中Flutter框架自帶的Material圖標并不能滿足我們項目的實際需求，因此一般情況下我們需要在項目中添加我們自己的字體圖標（iconfont），在國內我們一般使用iconfont-阿里巴巴矢量圖標庫管理我們的字體圖標，所以本文示例也是以此為例去給大家講一下如果在Flutter項目中添加自定義字體圖標。

添加自定義字體圖標其實并不是很復雜，希望我這篇文章可以幫助到大家。

一、獲取自定義圖標

第一步、我們需要注冊一個阿里巴巴矢量圖標庫網站賬號，登錄賬號之后，在項目管理——我的項目中新建項目。

第二步、上傳自己的圖標至項目中，或者將別人公開的圖標添加至自己的項目當中。

第三步、將圖標下載至本地，將解壓出的iconfont.ttf 文件添加至我們的flutter項目中。

二、將圖標集成在Flutter項目中

第一步、在flutter項目根目錄下新建assets文件夾，存放我們的字體圖標及圖片等靜態文件。

第五步、在根目錄的pubspec.yaml配置文件中添加我們的字體圖標文件。

flutter:uses-material-design: trueassets:# - images/a_dot_burr.jpeg# - images/a_dot_ham.jpeg- assets/images/home_logo.png# list giving the asset and other descriptors for the font. For# example:fonts:- family: iconfontfonts:- asset: assets/fonts/iconfont.ttf# - asset: fonts/Schyler-Italic.ttf# style: italic# - family: Trajan Pro# fonts:# - asset: fonts/TrajanPro.ttf# - asset: fonts/TrajanPro_Bold.ttf# weight: 700## For details regarding fonts from package dependencies,# see https://flutter.dev/custom-fonts/#from-packages

至此，我們已經成功的將我們自己的圖標字體文件集成在了我們的Flutter項目中。

我們可以使用如下代碼在項目中展示我們的自己的圖標。

const Icon(IconData(0xe794, // 字體圖標對應的16進制數字fontFamily: 'iconfont', // 字體名稱),size: 26, // 指定字體圖標的大小color: Color.fromRGBO(255, 146, 1, 1), // 指定字體圖標的顏色) )

如何獲取字體圖標對應的16進制的數據呢？

下載下來的字體圖標解壓之后有一個iconfont.json文件，打開文件每一個圖標都對應一個unicode編碼，我們拿到對應的unicode在前面加上0x即可獲得我們所需圖標對應的16進制的數據。

三、封裝管理自定義圖標

大家可以看到每次查看這個unicode碼是比較麻煩的，所以我們可以進一步封裝，將所有圖標封裝成一個類，在這個類里面存放我們所有的圖標，然后提供一個獲取圖標的工具函數，實現入下。

// 提供所有圖標的類 import 'package:flutter/material.dart'; class IconFonts {static const IconData messageLine = IconData(0xe6fe,fontFamily: 'iconfont',);static const IconData messageFill = IconData(0xe6fc,fontFamily: 'iconfont',);static const IconData driveLine = IconData(0xe7ce,fontFamily: 'iconfont',);// 其他所有圖標都尾貨在這里…… } // 獲取圖標的工具函數 Icon getIcons(IconData icon, {double size = 20, Color color = Colors.black}) {return Icon(icon,size: size,color: color,); }

至此，我們實現了對于自定義圖標的簡單封裝，接下來我們看看如何去使用。

// 通過入下這行代碼，我們獲取了我們自定義的分享的圖標，同時我們也修改了默認設置的顏色和圖標大小 getIcons(IconFonts.shareFill,size: 26.0, color: Colors.white),

其實，在這里這篇文章已經可以說是完結了，但是下面我拋出的問題也希望大家可以自己思考并實現一下。

四、新的封裝思路供大家探討

但是我感覺去手動維護存放我們所有圖標的那個類，比較瑪麻煩，目前我的想法是通過加載之前我們提到的iconfont.json這個文件里面的數據去自動生成這么一個類。

關于具體的實現，且見下回分享。還請大家來個一鍵三連（關注、點贊、收藏）和評論。

往期內容：

一、【Flutter開發環境搭建】Java SDK安裝

二、【Flutter開發環境搭建】Android SDK、Dart SDK及Flutter SDK安裝_

三、Flutter路由傳參

四、flutter全局狀態管理Provider

五、半天時間掌握Dart開發語言-基礎學習

六、半天時間掌握Dart開發語言-類的學習

總結

以上是生活随笔為你收集整理的Flutter自定义iconfont字体图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。