小而美的圖示


在 Material Design 的基本概念中，圖片往往是主要內容，若必要出現時，通常是滿版或佔有很大空間；相對地，圖示（Icon）的精神是以簡單的造形傳達概念，例如在選項上以圖示來表達功能、意圖等資訊，這類資訊若使用文字，往往需要更長的描述。

Flutter 中想使用圖示很簡單，直接來看個範例：

import 'package:flutter/material.dart';

void main() => runApp(
  Center(
    child: Text('\uE91D',
      textDirection: TextDirection.ltr,
      style: TextStyle(
        fontFamily: "MaterialIcons",
        fontSize: 96.0,
        color: Colors.green
      ),
    )
  )
);

這會顯示如下：

小而美的圖示

嗯？等一下！範例程式中沒有用到 Icon 啊？Flutter 中的圖示，可以是文字與字型的組成，Text 中指定的是碼點，然而指定了 fontFamily 為 MaterialIcons，這來自於 Google 開放的 [Material Icons](Material Icons)，並在 Flutter 中內建。

使用文字有彈性是有彈性，不過組合上麻煩了一些，Flutter 也有代表圖示的 Icon 類別，用來比較簡單。例如：

import 'package:flutter/material.dart';

void main() => runApp(
  MaterialApp(
    home: Center(
      child: Icon(
        Icons.pets,
        color: Colors.pink,
        size: 94
      ),
    )
  )
);

Icon 內部封裝了 RichText 等相關元件與設定，圖示資料是由第一個參數 icon 指定，型態必須是 IconData，例如 IconData(59677, fontFamily: 'MaterialIcons')，59677 是 0xE91D 的 10 進位表示，為了便於對應碼點跟圖示的外觀，Icons 上提供了一堆常數，直接在 Icons 的 API 文件上，可以看到名稱與圖的對應。

方才範例執行後的畫面如下：

小而美的圖示

那麼可不可以使用自己安裝的字型呢？例如，使用 twicon 圖示呢？可以的！在下載 twicon.zip 後，解開檔案將其中的 twicon.otf 放到專案中，例如自建一個 font 資料夾，將 twicon.otf 放進去，然後編輯 pubspec.yaml 加入：

fonts:

- family: TaiwanIcons
  fonts:
    - asset: fonts/twicon.otf

這套字型的碼點是從 0xA000 到 0xA063，對應至解開的檔案中 List.html 的圖示外觀，例如，想顯示台灣黑熊的話，可以如下：

import 'package:flutter/material.dart';

void main() => runApp(
  MaterialApp(
    home: Center(
      child: Icon(
        IconData(0xA050, fontFamily: "TaiwanIcons"),
        color: Colors.white,
        size: 94
      ),
    )
  )
);

執行後畫面如下：

小而美的圖示

當然，你也可以自己建個 TaiwanIcons 的類別，將各個圖示的 IconData 列為常數，就像 Icons 做的那樣，使用時就不用記得碼點對應等細節了。