Flutter 使用阿里巴巴icon庫

在Flutter默認建立的項目中能夠使用系統Material圖標，在pubspec.yaml文件中使用圖標設置以下：

flutter:
  uses-material-design: true

系統圖標以下：

若是這裏面沒有咱們想要的圖標如何處理呢？這時能夠使用第三方圖標庫，下面以阿里巴巴的圖標庫爲例。

查找圖標並加入購物車

找到本身想要的圖標後，將鼠標放置到圖標上，加入購物車，以下圖：

點擊右上角的購物車，而後點擊添加至項目，以下圖：

<img src="http://img.laomengit.com/iconfont_2.png" style="zoom:33%;" />

若是沒有添加過項目，須要建立一個新項目，以下圖：

<img src="http://img.laomengit.com/iconfont_3.png" style="zoom:33%;" />

建立好後加入此項目，跳轉到個人項目頁面，點擊下載，以下圖：

解壓下載的文件，解壓出來的文件有好幾個，以下圖：

選擇iconfont.ttf文件拷貝到Flutter項目的assets/fonts目錄下，assets/fonts目錄默認是沒有的，須要手動建立，在pubspec.yaml設置以下：

<img src="http://img.laomengit.com/iconfont_6.png" style="zoom:50%;" />

千萬注意紅框內開頭的空格問題，不然編譯不經過，family後面跟的字符串最好有意義，後面用圖標的時候須要用到。

用法以下：

Icon(IconData(0xe613,fontFamily: 'appIconFonts')

0xe613在下載圖標時已經標註，將&#替換爲0，以下圖：

fontFamily是在pubspec.yaml中設置的family屬性，第三方的圖標和系統圖標同樣，能夠設置其顏色和大小。

交流

若是你對Flutter還有疑問或者技術方面的疑惑，歡迎加入Flutter交流羣（微信：laomengit）。

同時也歡迎關注個人Flutter公衆號【老孟程序員】，公衆號首發Flutter的相關內容。

推薦一個Flutter學習地址：http://laomengit.com 裏面包含150多個組件的詳細用法。