我的個人博客同步更新，閱讀體驗會好一點，歡迎訪問。

簡書：http://m.itdecent.cn/u/762002465748

掘金：https://juejin.im/user/5a3127da5188251c11409f0a

個人博客：https://wuht.coding.me/

廢話

距離上一次更新博客已經(jīng)半年了，實在是有點忙，期間還換了了個工作，很多的事情，但是非常感謝有的網(wǎng)友還跟我聯(lián)系，自己寫的東西還有人覺得有價值，這感覺挺好的。

2018-06-09_190733.png

正文

2018年2月世界移動大會Google發(fā)布了 Flutter beat1，現(xiàn)在 Flutter 已經(jīng)更新到v0.5.2 了，是時候學習一波了。主要是最近在搞 Weex 被坑的不行了。

Iconfont 的使用自己去看一下文檔了，我就不說了。

目前在 Flutter 中使用圖標的幾種方式

內置圖標

目前在 Flutter 使用圖標的話，可以使用 Icons ：

  icon: Icon( Icons.home)

內置圖標還是挺多的，基本上還是夠用的。

fontawesome

除了Icons，還有國外比較流行了 fontawesome 可以使用，已經(jīng)有人做了個包了，依賴一下font_awesome_flutter這個包，使用也比較簡單：

  icon: new Icon(FontAwesomeIcons.gamepad), 

使用圖片

這個主要就是配置一下 pubspec.yaml里的assets，使用的話跟圖片一樣，缺點就是大小和顏色不太好控制，而且會增加項目的體積。

iconfont

國內用的多，但是還沒有人做 Flutter 的package，所以只能自己搞一下了。

教程開始了

從iconfont網(wǎng)站上下載ttf文件

2018-06-09_184200.png

放到某個目錄下，比如說 fonts 文件夾下:

project/
  lib/
    ...
  fonts/
    iconfont.ttf
  pubspec.yaml  

配置 pubspec.yaml 下的 fonts:

  fonts:
    - family: iconfont
      fonts:
        - asset: fonts/iconfont.ttf

然后就可以使用了

Icon( IconData(0xe6bb, fontFamily: 'iconfont'),color: Colors.blue,size: 89.0)

0xe6bb 這個十六進制是從這里拿到的：

2018-06-09_185052.png

不同的十六進制代表不同的圖標。

本來教程到這里就結束了，但在實際做的過程中我是有一個疑問的，就是為啥下面的代碼不可以正常顯示圖標，而且 字符 x，會被轉換成一個鍵盤的圖標，這個問題之前在vue使用v-text設置iconfont圖標就會出現(xiàn)，但是一直不知道為啥，希望有大佬能評論區(qū)解答一下。

Text("#0xe7b7;",style: TextStyle(fontFamily: 'iconfont'))// 可以正常換字體，但圖標不行

歡迎打賞，關注，點贊。