【Flutter】ボタンデザインいろいろ【Material3対応】

はじめに

今回は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('アイコン付きボタンの色反転')),

公式ドキュメント