[Flutter]自帶Icon不夠用？那就使用自己的Icon吧！

最後更新於 2021 年 6 月 4 日

官方Icon 文檔：https://api.flutter.dev/flutter/material/Icons-class.html

Icon一覽：https://design.google.com/icons/

自帶的Icon雖然簡潔好看但數量實在太少，我自己做APP的時候沒找到合適的Icon使用所以上網找了其他免費的圖示資源做使用。

下載喜歡的圖示(SVG檔)

網站名稱：SVG Repo – Free SVG Vectors and Icons
網站網址：https://www.svgrepo.com/

如果你不是選擇自己設計，你可以下載這個網站提供的免費圖示SVG檔

找到想要的圖示後下載到桌面，這邊提醒一下，建議先將SVG檔名稱修改為好記的代碼或名稱(英文/數字/底線)。

FlutterIcon

打開FlutterIcon頁面，將剛剛下載好的SVG檔拖移進去。

在左上方Custom Icons處可以看見你剛剛上傳的圖示，選擇後按右上方的DOWNLOAD下載到桌面。

將剛剛下載下來的壓縮檔解壓縮，可以看見有三個檔案 fonts資料夾 / config.json / my_flutter_app_icons.dart

將fonts裡面的ttf檔修改為別的名字(也可以不改，但當你有很多個fonts的時候就需要修改)

在專案中使用Icon

將 fonts資料夾丟入專案內

將 my_flutter_app_icons.dart 丟入專案/lib 中

開啟專案中的pubspec.yaml 寫上

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

開啟my_flutter_app_icons.dart 將 MyFlutterApp 改為自訂的名稱(ex:CustomIcons)，Icon的名稱也可以在下方修改。

注：剛打開的時候_kFontPkg前方可能會有一個問號造成錯誤，將它刪掉就行。

使用方法

在檔案中import my_flutter_app_icons.dart

Icon(
CustomIcons.圖示名稱,
color: Colors.blue,
size: 32.0,
)

如此一來，就能使用自己想要的圖示啦！

相關文章:

Flutter HTTP POST請求提交表單資料 Hexo NexT主題將網站字體改為宋體 Flutter常見問題－RenderFlex overflowed [Flutter]使用SharedPreferences記錄使用者設定/資料 [Flutter]發出HTTP請求獲取數據