Skip to content

[Flutter] 使用自定義的 Icon 圖片

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

Read More

Tags:

Leave a Reply