最後更新於 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, )
如此一來,就能使用自己想要的圖示啦!
- 解決 preact-router 資源請求路徑錯誤的問題 - 2022 年 6 月 24 日
- [楓之谷私服] 潮流轉蛋機 NPC 腳本優化 - 2022 年 6 月 19 日
- [楓之谷私服] 簡單的飛天椅子(坐騎)改法 v120 - 2022 年 6 月 19 日