%3Cbr%3E%3Cbr%3E%3Cbr%3E%3Cbr%3Emicomia株式会社の井上です。今回はButtonについて解説していきます。初心者にも分かりやすく解説していくのでぜひご一読ください。%3Cbr%3E%3Cbr%3E%3Cbr%3E%3Cbr%3E1. ButtonとはButtonはユーザーがタップやクリックなどの操作を行うためのウィジェットです。画面遷移やポップアップ表示などアプリ内でのアクションを起こすための最も基本的な要素になります。%3Cbr%3E%3Cbr%3E2. Buttonの実装方法ButtonはWidgetとして実装できます。%3Cbr%3E%3Cbr%3E%3Cbr%3E3. Buttonの詳細設定ここからは右側のプロパティパネルを元に詳細設定について解説していきます。まず、Paddingの部分でButton自体にPaddingをつけることができます。Buttonの位置を調節する際に使用できます。%3Cbr%3E%3Cbr%3E次に、Button Textの部分でボタン内に表示されるTextに関する変更をできます。%3Cbr%3E%3Cbr%3Eこれは他で使用するTextと同じように設定ができます。今回はテキストの内容とカラーを変えてみました。%3Cbr%3E%3Cbr%3Eその下のButton Default StyleはButtonのWidthやHeight、Fill ColorやBorder Colorを設定できます。%3Cbr%3E%3Cbr%3EElevationやBorder Radiusも他と同じように実装できます。その下のButton Paddingは、Button内のPaddingを設定できます。デフォルトで16ずつ入っていますが、好きな値に設定できます。%3Cbr%3E%3Cbr%3EこのButton Paddingを無くしてみると、このようになります。%3Cbr%3E%3Cbr%3E無くしてみても、基本中央に表示されるようになっているので左右16ずつ入れた時とあまり差はありません。これは、Widthが余裕を持たせた幅になっているのが原因なのでもう少し小さい値を入れてみると、%3Cbr%3E%3Cbr%3Eこのようになります。これより幅が小さくなると文字も見えなくなってしまうので、ボタンのサイズが変わっても文字は表示させるようにしたい場合はButton Paddingを入れると常に表示されるようになります。その下にあるIcon Propertiesの部分ではButtonの中にIconを追加することができます。%3Cbr%3E%3Cbr%3Eまた、ButtonはButtonだけで何か表示させるよりは画面遷移などのActionをつけることが多いです。Actionは、Actionボタンを押してAdd Actionから追加できます。%3Cbr%3E%3Cbr%3ENavigationやBackend/Databaseなどがありますが、今回はシンプルに画面遷移を紹介します。画面遷移はNavigationなのでNavigationからNavigate toを選択すると、このように全ての画面が表示されます。%3Cbr%3E%3Cbr%3E画面の追加方法は、左側のパネルの上部にある＋の部分を押すことでサンプルから持ってくることも、1から自分で作ることもできます。%3Cbr%3E%3Cbr%3E今回は先ほどのボタンからの遷移先としてCreate Account画面を追加してみます。Create Blankを選択して、画面名を好きなようにな入力後、Create Pageを押すことで画面を追加できます。%3Cbr%3E%3Cbr%3E追加できたら、先ほどのButtonがある画面に戻ってNavigate toにCreate Accountを実装することで画面遷移が行われます。%3Cbr%3E%3Cbr%3E%3Cbr%3E4. さいごに今回はButtonについて解説していきました。投稿作成やアカウント作成など多くの場面で使用するWidgetになっているので、ぜひ本記事の内容を生かして実装してみてください。本記事の内容を動画で見たい方は以下をご覧ください。%3Cbr%3E%3Ciframe%20width%3D%22560%22%20height%3D%22315%22%20src%3D%22https%3A%2F%2Fwww.youtube.com%2Fembed%2F4ZjCm4ioNN4%3Fsi%3D_r-dsQfvVIkROBGU%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