技術記事

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

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

1. Icon Buttonとは

Icon Buttonはその名の通りアイコンとボタンの機能を組み合わせたものになります。

アイコンとボタンそれぞれの機能に関しては別の記事で紹介しているのでそちらをご覧ください。

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

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

2. Icon Buttonの実装方法

Icon Buttonはその他のWidgetと同じように追加できます。

3. Icon Buttonの詳細設定

Button Default Styleの箇所にある部分から見ていきます。

まずButton SizeはIcon Button自体のサイズを変更できます。

その下にあるFill ColorはIcon Button自体のカラーを変更できます。

カラーをつけたくない場合は右側の×アイコンを押すことで削除できます。

下にあるBorder Colorは枠線のカラーを設定できます。設定方法は先ほどのFill Colorと同様です。

その横にあるBorder Widthは枠線の太さを設定できます。

Border Radiusは枠線の丸みを調節できます。

その下にあるIcon Propertiesのエリアでは中に表示されているIconに関する設定をできます。

その下にあるShow Loading Indicatorは、ONにするとIcon Buttonを押した時にローディングの表示がされます。

その下のDisableは、ONにするとIcon Buttonを押しても何も起こらない(Actionがない)状態にできます。

一番下にあるButton Hover Styleは、ホバー(カーソルが合わせられた状態)の色を変えることができます。

また、画面遷移などのActionをつける場合は他のWidgetと同じようにAdd Actionから追加できます。

Icon Buttonがよく使われている例としては、App Barの左側のものです。ここにはNavigate Backというアクションをつけて前の画面に戻すことが多いです。

4. さいごに

今回はIcon Buttonについて解説していきました。IconとButtonの機能が合わさった非常に便利なWidgetになっているのでぜひ本記事を参考にしながら実装してみてください。

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

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