Button
FlutterではさまざまなButton Widgetが提供されています。
ここではFlutterから提供されているボタンの基本的な使用方法をご紹介します。
- TextButton
- OutlinedButton
- ElevatedButton
Flutterからデフォルトで提供されているボタンには上記3つの種類があります。
ボタンWidgetはクリックを検知し、ユーザーからアクションを促すことができます。
TextButton(onPressed: () {},child: const Text("TextButton"),),OutlinedButton(onPressed: () {},child: const Text("OutlinedButton"),),ElevatedButton(onPressed: () {},child: const Text("ElevatedButton"),),
TextButtonはTextButton.styleFrom()
でスタイルの変更をすることができます。
また、無効化するにはonPressed
にNULLを設定することで対応できます。
TextButton(onPressed: () {},style: TextButton.styleFrom(foregroundColor: Colors.orange[900],),child: const Text("Warning",),),
OutlinedButtonはデフォルトではアウトラインの色の変更はされない仕様になっています。
変更したい場合はOutlinedButton.styleForm
のside
を使用して対応することができます。
OutlinedButton(onPressed: () {},style: OutlinedButton.styleFrom(side: const BorderSide(width: 1, color: Colors.orange),foregroundColor: Colors.orange[900],),child: const Text("Warning",),),
ElevatedButtonは色合いが強く、重要度の高いアクションで使用するのに最も適しています。
ElevatedButton(style: ElevatedButton.styleFrom(backgroundColor: Colors.orange,foregroundColor: Colors.orange[900]),onPressed: () {},child: const Text("Warning",style: TextStyle(color: Colors.white),),),
ボタンのサイズを変更したい場合は、fontSize
の変更が有効です。
また、フォントのサイズを変更せずにボタンのサイズを変更したい場合は、EdgeInsets.symmetric
の値を変更して対応することができます。
ElevatedButton(style: ElevatedButton.styleFrom(textStyle: const TextStyle(fontSize: 30),padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 20)),onPressed: () {},child: const Text("Large"),),
ボタンの意味をわかりやすくするために、アイコンをつけるのが有効です。
TextButton, OutlinedButton, ElevatedButton 全てにつけることができます。
ElevatedButton.icon(onPressed: () {},icon: const Icon(Icons.download,size: 16,),label: const Text('Download'),),
さらに詳しく知りたい場合は、以下の公式ドキュメントから参照してください。