はじめに
今回はFlutterで使えるボタンウィジェットの種類を紹介していきます。
FlutterのMaterial3では従来のTextButtonやElevatedButtonに加えて、FilledButtonが新たに追加されました。
FlutterでMaterial3を適用させるには以下のコードを追加します。
useMaterial3: true
＜コード例＞
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
// falseにすると旧テーマカラーに戻ります
useMaterial3: true,
),ボタンデザイン一覧
TextButton (輪郭や塗りつぶしの色のないボタン)
TextButton(
onPressed: () {},
child: const Text('TextButton')),OutlinedButton (枠線付きボタン)
OutlinedButton(
onPressed: () {},
child: const Text('OutlinedButton')),ElevatedButton (立体的な効果を持ったボタン)
ElevatedButton(
onPressed: () {},
child: const Text('ElevatedButton')),FloatingActionButton (円形のアイコンボタン)
FloatingActionButton(
onPressed: () {},
child: const Icon(Icons.add),),色付きボタン
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.amber,
foregroundColor: Colors.white,
),
onPressed: () {},
child: const Text('色付きボタン'),
),🆕 FilledButton (塗りつぶしボタン)
FilledButton(
onPressed: () {},
child: const Text('塗りつぶしボタン')),🆕 FilledButton.tonal (塗りつぶしボタンの色反転)
FilledButton.tonal(
onPressed: () {},
child: const Text('塗りつぶしボタンの色反転')),🆕 FilledButton.icon (アイコン付きボタン)
FilledButton.icon(
onPressed: () {},
icon: const Icon(Icons.shopping_cart),
label: const Text('アイコン付きボタン')),🆕 FilledButton.tonalIcon (アイコン付きボタンの色反転)
FilledButton.tonalIcon(
onPressed: () {},
icon: const Icon(Icons.shopping_cart),
label: const Text('アイコン付きボタンの色反転')),まとめ
いかがだったでしょうか？
UIデザインは日々アップデートしているのでこの機会に学んでみてはいかがでしょうか。
ご意見、ご感想ありましたらお気軽にコメントしてください。
【Material Designについてはコチラ】
Material Design
Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps te...
m3.material.io
コメント