Flutter

【Flutter】FilledButton と OutlinedButton

MaterialDesign3から塗りつぶしボタン（FilledButton）と外枠ボタン（OutlinedButton）が標準装備されたみたいなので使ってみました。

【Flutter】FilledButton と OutlinedButton

事前設定

MaterialAppのtheme: ThemeData()でuseMaterial3: trueを指定してMaterialDesign3を適用します。

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: true,
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

FilledButton

シンプルなパターン

FilledButton(onPressed: () {}, child: const Text('ログイン'))

アイコン付き

FilledButton.icon(onPressed: () {}, icon: const Icon(Icons.login), label: const Text('ログイン'))

文字と背景の色反転

FilledButton.tonal(onPressed: () {}, child: const Text('次へ'))

OutlinedButton

シンプルなパターン

OutlinedButton(onPressed: () {}, child: const Text('戻る'))

アイコン付き

OutlinedButton.icon(onPressed: () {}, icon: const Icon(Icons.arrow_back), label: const Text('戻る'))

親Widgetの横幅いっぱいに表示する

ボタンの横幅はchildの幅に依存するため、親Widgetの横幅いっぱいに表示したい場合はSizedBoxで包んでwidthにdouble.infinityを指定しましょう。

SizedBox(
  width: double.infinity,
  child: FilledButton(onPressed: () {}, child: const Text('親Widgetの幅いっぱい')),
)

以上