技術記事

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

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

1. Buttonとは

Buttonはユーザーがタップやクリックなどの操作を行うためのウィジェットです。画面遷移やポップアップ表示などアプリ内でのアクションを起こすための最も基本的な要素になります。

2. Buttonの実装方法

ButtonはWidgetとして実装できます。

3. Buttonの詳細設定

ここからは右側のプロパティパネルを元に詳細設定について解説していきます。

まず、Paddingの部分でButton自体にPaddingをつけることができます。Buttonの位置を調節する際に使用できます。

次に、Button Textの部分でボタン内に表示されるTextに関する変更をできます。

これは他で使用するTextと同じように設定ができます。今回はテキストの内容とカラーを変えてみました。

その下のButton Default StyleはButtonのWidthやHeight、Fill ColorやBorder Colorを設定できます。

ElevationやBorder Radiusも他と同じように実装できます。

その下のButton Paddingは、Button内のPaddingを設定できます。デフォルトで16ずつ入っていますが、好きな値に設定できます。

このButton Paddingを無くしてみると、このようになります。

無くしてみても、基本中央に表示されるようになっているので左右16ずつ入れた時とあまり差はありません。これは、Widthが余裕を持たせた幅になっているのが原因なのでもう少し小さい値を入れてみると、

このようになります。これより幅が小さくなると文字も見えなくなってしまうので、ボタンのサイズが変わっても文字は表示させるようにしたい場合はButton Paddingを入れると常に表示されるようになります。

その下にあるIcon Propertiesの部分ではButtonの中にIconを追加することができます。

また、ButtonはButtonだけで何か表示させるよりは画面遷移などのActionをつけることが多いです。

Actionは、Actionボタンを押してAdd Actionから追加できます。

NavigationやBackend/Databaseなどがありますが、今回はシンプルに画面遷移を紹介します。

画面遷移はNavigationなのでNavigationからNavigate toを選択すると、このように全ての画面が表示されます。

画面の追加方法は、左側のパネルの上部にある＋の部分を押すことでサンプルから持ってくることも、1から自分で作ることもできます。

今回は先ほどのボタンからの遷移先としてCreate Account画面を追加してみます。

Create Blankを選択して、画面名を好きなようにな入力後、Create Pageを押すことで画面を追加できます。

追加できたら、先ほどのButtonがある画面に戻ってNavigate toにCreate Accountを実装することで画面遷移が行われます。

4. さいごに

今回はButtonについて解説していきました。投稿作成やアカウント作成など多くの場面で使用するWidgetになっているので、ぜひ本記事の内容を生かして実装してみてください。

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

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