%3Cbr%3E%3Cbr%3Emicomia株式会社の井上です。今回はIcon Buttonについて解説していきます。初心者にも分かりやすく解説していくのでぜひご一読ください。%3Cbr%3E%3Cbr%3E%3Cbr%3E%3Cbr%3E1. Icon ButtonとはIcon Buttonはその名の通りアイコンとボタンの機能を組み合わせたものになります。アイコンとボタンそれぞれの機能に関しては別の記事で紹介しているのでそちらをご覧ください。Iconとは？｜初心者向けのFlutterFlow徹底解説Buttonとは？｜初心者向けのFlutterFlow徹底解説%3Cbr%3E%3Cbr%3E2. Icon Buttonの実装方法Icon Buttonはその他のWidgetと同じように追加できます。%3Cbr%3E%3Cbr%3E%3Cbr%3E3. Icon Buttonの詳細設定Button Default Styleの箇所にある部分から見ていきます。まずButton SizeはIcon Button自体のサイズを変更できます。%3Cbr%3E%3Cbr%3Eその下にあるFill ColorはIcon Button自体のカラーを変更できます。%3Cbr%3E%3Cbr%3Eカラーをつけたくない場合は右側の×アイコンを押すことで削除できます。%3Cbr%3E%3Cbr%3E下にあるBorder Colorは枠線のカラーを設定できます。設定方法は先ほどのFill Colorと同様です。その横にあるBorder Widthは枠線の太さを設定できます。%3Cbr%3E%3Cbr%3EBorder Radiusは枠線の丸みを調節できます。%3Cbr%3E%3Cbr%3Eその下にあるIcon Propertiesのエリアでは中に表示されているIconに関する設定をできます。%3Cbr%3E%3Cbr%3Eその下にあるShow Loading Indicatorは、ONにするとIcon Buttonを押した時にローディングの表示がされます。%3Cbr%3E%3Cbr%3Eその下のDisableは、ONにするとIcon Buttonを押しても何も起こらない(Actionがない)状態にできます。%3Cbr%3E%3Cbr%3E一番下にあるButton Hover Styleは、ホバー(カーソルが合わせられた状態)の色を変えることができます。%3Cbr%3E%3Cbr%3Eまた、画面遷移などのActionをつける場合は他のWidgetと同じようにAdd Actionから追加できます。%3Cbr%3E%3Cbr%3EIcon Buttonがよく使われている例としては、App Barの左側のものです。ここにはNavigate Backというアクションをつけて前の画面に戻すことが多いです。%3Cbr%3E%3Cbr%3E%3Cbr%3E4. さいごに今回はIcon Buttonについて解説していきました。IconとButtonの機能が合わさった非常に便利なWidgetになっているのでぜひ本記事を参考にしながら実装してみてください。本記事の内容を動画で見たい方は以下をご覧ください。%3Cbr%3E%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2FjF8wkZw6nEY%3Fsi%3DDBdxGiHn47h4ZrTX%22%20title%3D%22YouTube%20video%20player%22%20frameborder%3D%220%22%20allow%3D%22accelerometer%3B%20autoplay%3B%20clipboard-write%3B%20encrypted-media%3B%20gyroscope%3B%20picture-in-picture%3B%20web-share%22%20referrerpolicy%3D%22strict-origin-when-cross-origin%22%20allowfullscreen%3E%3C%2Fiframe%3E%3Cbr%3E