ボタンを表示
このページのゴール
- ボタンを表示するためのWidgetの扱いを知る
TextButton・OutlinedButton・ElevatedButton
基本的なボタン表示用Widgetとしては以下の3種類があります。
- TextButton
- 影のないボタン
- OutlinedButton
- 枠線のあるボタン
- ElevatedButton
- 影のあるボタン
ボタンを表示する
各ボタン表示用Widgetの基本的な使い方としては、
child にボタン内に表示したいWidgetを指定し、
onPressed にタップされた時の処理を指定すればOKです 👍
TextButton(
onPressed: () { /* ボタンがタップされた時の処理 */ },
child: Text('click here'),
)
OutlinedButton(
onPressed: () { /* ボタンがタップされた時の処理 */ },
child: Text('click here'),
)
ElevatedButton(
onPressed: () { /* ボタンがタップされた時の処理 */ },
child: Text('click here'),
)
押せなくする
ボタンを押せないようにする（無効化）する時は、onPressed に null を指定すればOKです 👍
ボタンが押せるときと押せないときでデザインが自動的に切り替わったりします。
TextButton(
onPressed: () { /* ボタンが押せる時 */ },
child: Text('押せるよ'),
)
OutlinedButton(
onPressed: null,
child: Text('押せないよ'),
)
テーマ色を変える
各ボタンのテーマ色を変えるときは style を指定すればOKです 👍
TextButton(
onPressed: () { /* ボタンが押せる時 */ },
style: TextButton.styleFrom(
primary: Colors.red,
),
child: Text('押せるよ'),
)
OutlinedButton(
onPressed: () { /* ボタンが押せる時 */ },
style: OutlinedButton.styleFrom(
primary: Colors.red,
),
child: Text('押せるよ'),
)
ElevatedButton(
onPressed: () { /* ボタンが押せる時 */ },
style: ElevatedButton.styleFrom(
primary: Colors.red,
),
child: Text('押せるよ'),
)
影の深さを変える
ElevatedButton の影の深さを変えるときは elevation を指定すればOKです 👍
ElevatedButton(
onPressed: () { /* ボタンが押せる時 */ },
style: ElevatedButton.styleFrom(
primary: Colors.red,
elevation: 16,
),
child: Text('押せるよ'),
)
使ってみる
実際に使ってみるとこんな感じになります。
👇 色々と書き換えて動かしてみましょう 💪💪💪
この他にも、色々と機能はあるので気になるときは公式ドキュメントを見てみましょう 👀
IconButton
アイコンボタンを表示する
アイコンボタンを表示する時は IconButton を使えばOKです 👍
IconButton(
onPressed: () {},
// 表示アイコン
icon: Icon(Icons.thumb_up),
// アイコン色
color: Colors.pink,
// サイズ
iconSize: 64,
)
テキスト＋アイコンボタンを表示する
テキストとアイコンを含めたボタンを表示する時は、
TextButton.icon・OutlinedButton.icon・ElevatedButton.icon を使えばOKです 👍
基本的な使い方は TextButton・OutlinedButton・ElevatedButton と同じですが、
icon でアイコンを指定し、label でテキストを指定する部分が異なってます 🤔
TextButton.icon(
onPressed: () {},
icon: Icon(Icons.thumb_up),
label: Text('Good'),
)
OutlinedButton.icon(
onPressed: () {},
icon: Icon(Icons.favorite),
label: Text('Like'),
)
ElevatedButton.icon(
onPressed: () {},
icon: Icon(Icons.flight),
label: Text('Flight'),
)
使ってみる
実際に使ってみるとこんな感じになります。
👇 色々と書き換えて動かしてみましょう 💪💪💪
この他にも、色々と機能はあるので気になるときは公式ドキュメントを見てみましょう 👀
FloatingActionButton
FloatingActionButtonを表示する
マテリアルデザインを採用したアプリで表示されるFloatingActionButtonを表示する時は、
FloatingActionButton を使えばOKです 👍
Scaffold の floatingActionButton に指定することで手軽に表示できます。
Scaffold(
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.green,
onPressed: () {},
child: Icon(Icons.add),
),
)
使ってみる
実際に使ってみるとこんな感じになります。
👇 色々と書き換えて動かしてみましょう 💪💪💪
この他にも、色々と機能はあるので気になるときは公式ドキュメントを見てみましょう 👀
まとめ
- 基本的なボタンは
TextButton・OutlinedButton・ElevatedButtonWidgetを使えばOK - アイコンボタンは
IconButtonWidgetを使えばOK - アイコン＋テキストボタンは
TextButton.icon・OutlinedButton.icon・ElevatedButton.iconWidgetを使えばOK FloatingActionButtonを使う時はScaffoldと組み合わせればOK
次は、リストを表示するためのWidgetを紹介していきます 💪💪💪
