こんにちは！
BPSの福岡拠点として一緒にお仕事をさせていただいています、株式会社ウイングドアのウメバヤシです。
iOSやAndroidのアプリで下タブ（BottomNavigationBarやUITabBar）などを実装することはよくあるかと思います。
その際、アイコンをオリジナルの画像にすることも多いと思いますが、通常は端末ごとに適正サイズの画像ファイルを何サイズか組み込みます。
ただ、Flutterではちょっと違った方法で設定した方がスマートそうだったので、今回はその方法を紹介します。
画像ファイルを設定するだけじゃダメなの？
iOSやAndroidネイティブだと端末の画素密度ごとに適正サイズの画像ファイルを設定すると思いますが、
FlutterではUIもコードで書いて作成していくので、アイコン画像をカスタムするときなども、
コード中に画像の表示サイズを数値で指定してあげないと、いい感じのサイズで表示されません。
アイコンテイストで使用したい画像全てにサイズ指定をしないといけないので手間もかかります。
Flutter custom icons generator
そこで今回はこちらのツールを使ってカスタムアイコンを作っていきます。
fluttericon.comより
必要なものは、設定したいアイコンのsvgファイルです。
使い方
ざっくり概要を説明すると、svgファイルを元にアイコンフォントを作成し、
それをFlutterプロジェクトに組み込んで、カスタムIconとして使用する手法です。
大きく3つの手順に分けて説明していきます。
今回はこちらの画像でアイコンを作成してみようと思います。
⚓ 1. svgファイルをアップロード
「Drug custom SVG icons or SVG font here.」と書いているところに、用意したSVGファイルをドラッグします。
⚓ 2. 必要なファイルをダウンロード
アップロードが完了すると、カスタムアイコンが選べるようになるので選択します。
任意の名前をつけて、「DOWNLOAD」ボタンからダウンロードします。
名前は今回「WDLogo」としてみました。
zipファイルがダウンロードされるので解凍すると、このようになっています。
| ファイル名 | 内容 |
|---|---|
| config.json | 今回ダウンロードしたアイコンの情報が保存されています。 再度同じデータをダウンロードする場合は、svgファイルではなくこちらをドラッグすることで再現できます。 |
| WDLogo.ttf | アイコンフォントです。 |
| w_d_logo_icons.dart | FlutterでIconを生成するために必要なコードが記述されたdartファイルです。スネークケースで命名されるみたいです。 |
⚓ 3. Flutterプロジェクトに組み込む
ダウンロードしたファイルをFlutterプロジェクトに組み込みます。
ttfファイルを適当な場所に配置する
- (my_app)/fonts/WDLogo.ttf
- (my_app)/fonts/config.json
※「config.json」は、実装には不要ですが、アイコンファイルの再ダウンロードや、
既存のアイコンセットにアイコンを追加したくなったときに使うので、
紛失しないように同じフォルダに格納するのがいいかもしれません。
pubspec.yamlファイルを編集する
フォントを追加する時と同じです。
fonts:
- family: WDLogo
fonts:
- asset: fonts/WDLogo.ttf
w_d_logo_icons.dartを適当な場所に配置する
- (my_app)/lib/w_d_logo_icons.dart
ファイルの中身は、IconDataを生成するコードが記述されているのが確認できます。
class WDLogo {
WDLogo._();
static const _kFontFam = 'WDLogo';
static const _kFontPkg = null;
static const IconData wd_logo = IconData(0xe800, fontFamily: _kFontFam, fontPackage: _kFontPkg);
}
アイコンの設定方法
以上の作業が終わったら、あとはカスタムアイコンを設定したい箇所で下記のように記述します。
Icon(WDLogo.wd_logo)
試しにFloatingActionButtonに設定してみました。
void main() => runApp(App());
class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Custom icon in Flutter.'),
),
body: Center(
child: FloatingActionButton(
child: Icon(WDLogo.wd_logo),
onPressed: () {},
),
),
),
);
}
}
ちゃんと設定されていますね。
BottomNavigationBarのアイコンなどに使用する時も、サイズ指定しなくても勝手にいい感じのサイズにしてくれます👍
最後に
やり方さえわかれば簡単に追加できますし、アイコンの画像サイズも考える必要が無いので楽です😄
svgファイルさえ用意できれば、端末の画像密度ごとに画像ファイルを複数準備する必要も無いのでオススメです✨
株式会社ウイングドアでは、Ruby on RailsやPHPを活用したwebサービス、webサイト制作を中心に、
スマホアプリや業務系システムなど様々なシステム開発を承っています。