オリジナルイラストをアイコンとして扱う【Flutter】

はじめに

Flutterにおいて画像やイラストを用いたbuttonなどを作るにはいくつか方法があるかと思いますが、アイコンのようなテイストならアイコンフォントとしてまとめてしまうのが何かと使い勝手が良いと思いました。

用意するもの

• アイコンにしたいSVG形式の画像

フォントアイコンへの変換

こちらのサイトを使わせて頂きます。
FlutterIcon - Flutter icon font generator

1. 変換したいイラストをアップロード

2. フォントに名前を付けてダウンロード

3. Flutterのプロジェクトに組み込む

ダウンロードしたフォルダの中身↓

ttfファイルをFlutterプロジェクトファイルの適当な場所に配置。

(project_name)/fonts/Sample.ttf

pubspec.yamlファイルを編集。

pubspec.yaml

flutter:
  fonts:
  - family:  Sample
    fonts:
     - asset: fonts/Sample.ttf

ダウンロードしたフォルダ内にあるdartファイルからIconDataオブジェクトを生成するコードを確認することが出来ます。

sample.dart

IconButton(
    icon: new Icon(IconData(0xe800, fontFamily: 'Sample'))
)