[Flutter]自帶Icon不夠用?那就使用自己的Icon吧!

最後更新於 2021 年 6 月 4 日

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

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

20210302154656 [Flutter]自帶Icon不夠用?那就使用自己的Icon吧!

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

下載喜歡的圖示(SVG檔)

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

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

20210302154235 [Flutter]自帶Icon不夠用?那就使用自己的Icon吧!

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

FlutterIcon

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

20210302154248 [Flutter]自帶Icon不夠用?那就使用自己的Icon吧!

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

20210302154250 [Flutter]自帶Icon不夠用?那就使用自己的Icon吧!

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

20210302154254 [Flutter]自帶Icon不夠用?那就使用自己的Icon吧!

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

20210302154306 [Flutter]自帶Icon不夠用?那就使用自己的Icon吧!
20210302154304 [Flutter]自帶Icon不夠用?那就使用自己的Icon吧!

在專案中使用Icon

將 fonts資料夾丟入專案內

20210302154333 [Flutter]自帶Icon不夠用?那就使用自己的Icon吧!

將 my_flutter_app_icons.dart 丟入專案/lib 中

20210302154347 [Flutter]自帶Icon不夠用?那就使用自己的Icon吧!

開啟專案中的pubspec.yaml 寫上

 fonts:
  - family: CustomIcons
    fonts:
      - asset: fonts/CustomIcons.ttf
20210302154353 [Flutter]自帶Icon不夠用?那就使用自己的Icon吧!

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

20210302154405 [Flutter]自帶Icon不夠用?那就使用自己的Icon吧!

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

使用方法

在檔案中import my_flutter_app_icons.dart

20210302154444 [Flutter]自帶Icon不夠用?那就使用自己的Icon吧!
Icon(
CustomIcons.圖示名稱,
color: Colors.blue,
size: 32.0,
)
20210302154429 [Flutter]自帶Icon不夠用?那就使用自己的Icon吧!

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

20210302154434 [Flutter]自帶Icon不夠用?那就使用自己的Icon吧!
0 0 評分數
Article Rating
訂閱
通知
guest

0 Comments
在線反饋
查看所有評論