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

添加自定義字體圖標(biāo)其實(shí)并不是很復(fù)雜，希望我這篇文章可以幫助到大家。

一、獲取自定義圖標(biāo)

第一步、我們需要注冊一個(gè)阿里巴巴矢量圖標(biāo)庫網(wǎng)站賬號，登錄賬號之后，在項(xiàng)目管理——我的項(xiàng)目中新建項(xiàng)目。

第二步、上傳自己的圖標(biāo)至項(xiàng)目中，或者將別人公開的圖標(biāo)添加至自己的項(xiàng)目當(dāng)中。

第三步、將圖標(biāo)下載至本地，將解壓出的iconfont.ttf 文件添加至我們的flutter項(xiàng)目中。

二、將圖標(biāo)集成在Flutter項(xiàng)目中

第一步、在flutter項(xiàng)目根目錄下新建assets文件夾，存放我們的字體圖標(biāo)及圖片等靜態(tài)文件。

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

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

至此，我們已經(jīng)成功的將我們自己的圖標(biāo)字體文件集成在了我們的Flutter項(xiàng)目中。

我們可以使用如下代碼在項(xiàng)目中展示我們的自己的圖標(biāo)。

const Icon(IconData(0xe794, // 字體圖標(biāo)對應(yīng)的16進(jìn)制數(shù)字fontFamily: 'iconfont', // 字體名稱),size: 26, // 指定字體圖標(biāo)的大小color: Color.fromRGBO(255, 146, 1, 1), // 指定字體圖標(biāo)的顏色) )

如何獲取字體圖標(biāo)對應(yīng)的16進(jìn)制的數(shù)據(jù)呢？

下載下來的字體圖標(biāo)解壓之后有一個(gè)iconfont.json文件，打開文件每一個(gè)圖標(biāo)都對應(yīng)一個(gè)unicode編碼，我們拿到對應(yīng)的unicode在前面加上0x即可獲得我們所需圖標(biāo)對應(yīng)的16進(jìn)制的數(shù)據(jù)。

三、封裝管理自定義圖標(biāo)

大家可以看到每次查看這個(gè)unicode碼是比較麻煩的，所以我們可以進(jìn)一步封裝，將所有圖標(biāo)封裝成一個(gè)類，在這個(gè)類里面存放我們所有的圖標(biāo)，然后提供一個(gè)獲取圖標(biāo)的工具函數(shù)，實(shí)現(xiàn)入下。

// 提供所有圖標(biāo)的類 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',);// 其他所有圖標(biāo)都尾貨在這里…… } // 獲取圖標(biāo)的工具函數(shù) Icon getIcons(IconData icon, {double size = 20, Color color = Colors.black}) {return Icon(icon,size: size,color: color,); }

至此，我們實(shí)現(xiàn)了對于自定義圖標(biāo)的簡單封裝，接下來我們看看如何去使用。

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

其實(shí)，在這里這篇文章已經(jīng)可以說是完結(jié)了，但是下面我拋出的問題也希望大家可以自己思考并實(shí)現(xiàn)一下。

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

但是我感覺去手動(dòng)維護(hù)存放我們所有圖標(biāo)的那個(gè)類，比較瑪麻煩，目前我的想法是通過加載之前我們提到的iconfont.json這個(gè)文件里面的數(shù)據(jù)去自動(dòng)生成這么一個(gè)類。

關(guān)于具體的實(shí)現(xiàn)，且見下回分享。還請大家來個(gè)一鍵三連（關(guān)注、點(diǎn)贊、收藏）和評論。

往期內(nèi)容：

一、【Flutter開發(fā)環(huán)境搭建】Java SDK安裝

二、【Flutter開發(fā)環(huán)境搭建】Android SDK、Dart SDK及Flutter SDK安裝_

三、Flutter路由傳參

四、flutter全局狀態(tài)管理Provider

五、半天時(shí)間掌握Dart開發(fā)語言-基礎(chǔ)學(xué)習(xí)

六、半天時(shí)間掌握Dart開發(fā)語言-類的學(xué)習(xí)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。