はじめに
今回はFlutterで使えるボタンウィジェットの種類を紹介していきます。
従来のTextButtonやElevatedButtonに加えて、FlutterのMaterial3では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('アイコン付きボタンの色反転')),
コメント