技術記事

micomia株式会社の井上です。今回はIconについて解説していきます。

初心者にも分かりやすく解説していくのでぜひご一読ください。

1. Iconとは

いつもアプリを開いた時に、設定マークやハートマーク、メニューボタンなどを見かけることが多くあると思います。それらは全てIconというUIパーツで作られています。

Iconは機能や操作を視覚的に伝える手段になっていて、Textを置くよりも簡潔で分かりやすい印象になります。

2. Iconの実装方法

IconはWidgetとして他と同じように追加できます。

Iconを追加するとこのようになります。

Icon Propertiesを見るとデフォルトでArrow Backが入っていますが、これを変えたいときは現在Arrow Backと表示されている箇所を押すとこのようにChoose Iconの画面が表示されます。

Material Iconに約9000種類、Font Awesomeに約1600種類あります。

FlutterFlowでは基本的にMaterial Iconを使用することが多いですが、約9000種類をスクロールして目当てのアイコンを探すのはかなり時間がかかるので、アイコンを英語で検索する必要があります。

例えば、いいねによく使用されるハートアイコンだと「favorite」と入力すると出てくることが多いです。

同じような意味の言葉を入力しても出てこないことはよくあるので、出てこない場合は当てはまりそうな英語を何パターンか入力して探す必要があります。

MaterialにもFont Awesomeにも目当てのアイコンがなかった場合、一番右のCustom Iconsからアイコンを追加することができます。

インターネットで調べるか自分で作るなどしたあと、Dartの形式でファイルを読み込ませて使うことができます。

ですが、基本的にはMaterial IconかFont Awesomeを使用することをおすすめします。

3. Iconの詳細設定

Iconの詳細設定はその他のWidgetと同じく、サイズとカラーを変更できます。

アイコンサイズとカラーを変えてみると、このようになります。

このIconに何かしらのActionをつけたい場合は、他のWidgetと同じようにAdd Actionから追加できます。

ちなみに、いいね機能などをつけたい場合はIconではなくToggle Iconというまた別のIconを使用することになるので注意してください。

また、Iconの別の種類としてIcon Buttonというものも存在します。これは画面遷移など何かしらのActionをつけたい時に使用することが多いです。Icon Buttonについては次の記事で紹介しているのでぜひご覧ください。

Icon Buttonとは？｜初心者向けのFlutterFlow徹底解説

少し複雑なので3つのアイコンのそれぞれの用途をまとめると以下のようになります。

Icon= UIにおける装飾の役割

Toggle Icon= いいね・お気に入り登録など

Icon Button= ナビゲーションや操作

4. さいごに

今回はIconについて解説していきました。Icon自体は簡単なものの、Toggle IconやIcon Buttonとの使い分けが少し難しかったりするので本記事を参考にしながら上手く使い分けて実装のレベルを高めていきましょう。

本記事の内容を動画で見たい方は以下をご覧ください。

動画でもっと知りたい方はこちら