在Flutter默認創建的項目中可以使用系統Material圖標,在pubspec.yaml
文件中使用圖標設置如下:
flutter:
uses-material-design: true
系統圖標如下:
如果這里面沒有我們想要的圖標如何處理呢?這時可以使用第三方圖標庫,下面以阿里巴巴的圖標庫為例。
查找圖標並加入購物車
找到自己想要的圖標后,將鼠標放置到圖標上,加入購物車,如下圖:
點擊右上角的購物車,然后點擊添加至項目,如下圖:

如果沒有添加過項目,需要創建一個新項目,如下圖:

創建好后加入此項目,跳轉到我的項目
頁面,點擊下載,如下圖:
解壓下載的文件,解壓出來的文件有好幾個,如下圖:
選擇iconfont.ttf
文件拷貝到Flutter項目的assets/fonts
目錄下,assets/fonts
目錄默認是沒有的,需要手動創建,在pubspec.yaml
設置如下:

千萬注意紅框內開頭的空格問題,否則編譯不通過,family
后面跟的字符串最好有意義,后面用圖標的時候需要用到。
用法如下:
Icon(IconData(0xe613,fontFamily: 'appIconFonts')
0xe613
在下載圖標時已經標注,將&#
替換為0
,如下圖:
fontFamily
是在pubspec.yaml
中設置的family
屬性,第三方的圖標和系統圖標一樣,可以設置其顏色和大小。
交流
如果你對Flutter還有疑問或者技術方面的疑惑,歡迎加入Flutter交流群(微信:laomengit)。
同時也歡迎關注我的Flutter公眾號【老孟程序員】,公眾號首發Flutter的相關內容。
推薦一個Flutter學習地址:http://laomengit.com 里面包含150多個組件的詳細用法。