Last Updated on 2021-10-15 by Clay
在開發 APP 的過程中，總會有許多需要使用到 Icon（圖示）元件的時候，大部分都是做為按鈕功能的示意圖。Flutter 這個開發框架很貼心地設置了一些內建的圖示供我們使用，但即便如此，也難免會有需要自定義 Icon 的時候。
當然，你可能會想說：我直接將圖片讀取、顯示出來不就好了？
對，這是一種做法。不過今天我還需要可以讓使用者自定義顏色的圖示呢？這時候，使用 Flutter 內建的 Icon 類別接口來處理我們自定義的 Icon 會是一件很方便的事情。
也許用文字實在難以說明，直接看以下的紀錄吧。
Flutter 中使用自定義的圖示
Step 1: 製作 Flutter 所需格式的 Icon
首先，可以前往 FlutterIcon 這個網站。這個網站除了可以讓你上傳自己設計的 SVG 圖片並轉成 Flutter 可以支援的格式外，也能讓你直接下載別人提供的圖示（下載他人圖示並使用時，請注意授權形式）。
使用方法如下方圖片所示：選擇 Icons，並下關鍵字搜尋想要的圖片。點選圖片後，最右側深藍色的 DOWNLOAD 按鈕便會顯示你選擇了多少圖片。
選擇好你要的圖片之後，也能選擇下方圖片中的 Names，並調整你所選擇的圖片名稱。
Step 2: 下載、解壓縮
接著，我們便可以點擊 DOWNLOAD 按鈕進行下載。下載後是個 zip 壓縮檔，解壓縮後會看到有以下文件的資料夾。
Step 3: 將下載的檔案放到專案對應的位置
將 fonts 資料夾放到專案跟目錄中；my_flutter_app_icons.dart 放置於 lib 資料夾中。（名稱可以自行修改，不過在後續步驟的操作中也需要相應的更改。）
Step 4: 修改 pubspec.yaml 文件
Step 5: 使用這些自定義的 Icons
import 'package:flutter/material.dart';
import 'package:flutter_app/my_flutter_app_icons.dart';
// Main
void main() => runApp(MyApp());
// MyApp
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
// _MyAppState
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Icon(
MyFlutterApp.food,
color: Colors.purple,
size: 100,
),
),
),
);
}
}
Output:
如果我沒有搞錯的話，這個用餐的圖示是 Flutter 中本來沒有提供的。現在我們可以在專案中使用程式碼自由呼叫這個圖示了。
References
- https://www.fluttericon.com/
- https://medium.com/codechai/how-to-use-custom-icons-in-flutter-834a079d977
- https://medium.com/deviniti-technology-driven-blog/the-best-way-to-add-custom-icons-to-your-flutter-project-6381ab697813