【Flutter】 IconButton 使ってみた！【Material 3】

「 IconButton の使い方を知りたい！」

本記事ではそんな要望にお答えします。

Flutter でアイコンをボタン化するWidget、
IconButton Widgetについて解説します。

Flutter 3.3 で追加されたMaterial3 対応についても解説していきます。

ぜひ読んでみて下さい！

基本的な使い方
1. カスタマイズ
Material3に対する対応
まとめ
編集後記（2022/9/7）

基本的な使い方

IconButton Widgetの基本的な使い方について解説していきます。

IconButton Widgetは以下のようにして使用します。

IconButton(
  icon: const Icon(Icons.volume_up),
  onPressed: () {
    // ボタンが押された際の動作を記述する
  },
）

icon プロパティに設定したいアイコンをIcon Widgetにて設定します。
onPressedプロパティにて、アイコンが押された際の動作を設定します。

カスタマイズ

IconButton ウィジェットの iconSizeプロパティにてアイコンのサイズを変更することが可能です。
また、IconButton ウィジェットの colorプロパティにてアイコンの色を設定することが可能です。

IconButton ウィジェットのiconプロパティの
Iconウィジェットにてsizeとcolorを設定していた場合、
Iconウィジェットの設定が優先されます。

paddingプロパティでアイコン周りのpaddingを設定可能です。
また、splashRadiusプロパティにて、アイコンを押した時の波紋の大きさを設定可能です。

splashRadiusとpaddingを両方設定した場合、アイコンボタンが大きくなる方に設定されます。

splashRadiusは後述するMaterial3対応(`MaterialApp内でのuseMaterial3の有効化)
をすると、無効化されます。

Material3に対する対応

Flutter3.3で発表された、FlutterでのIconButtonのMaterial3対応について紹介します。

Material3 への対応項目として、2つ紹介します。

デザイン反映のためのstyleプロパティ
トグルボタン化のためのisSelectedとselectedIconプロパティ

Material 3のIconButtonについての記述は、こちらをご覧ください。

準備

Material3 をアプリで有効化するために、
MaterialApp内のthemeプロパティに追加するThemeDataにて、
useMaterial3プロパティをtrueにします。

また、Material3で追加されたダイナミックカラーでの色設定の代わりとして、
基準となる色をcolorSchemeSeedプロパティにて設定します。

    MaterialApp(
      theme: ThemeData(
        colorSchemeSeed: const Color(0xff6750a4),
        useMaterial3: false,
      ),
      home: const MyHomePage(),
    );

デザイン反映

Material 3では標準とcontainedの2種類のボタンが存在します。

下記画像で、一番上が標準、下3つがcontainedです。

containedのIconButtonを実装するために設定するのが、
styleプロパティです。

styleプロパティにIconButton.styleFrom()を設定し、
styleFromの中で色などさまざまな設定を行うことで、
上記画像のボタンを実現可能となります。

上記画像の実装コードは以下の通りです。

  @override
  Widget build(BuildContext context) {
    final ColorScheme colors = Theme.of(context).colorScheme;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Icon Button Sample'),
      ),
      body: Center(
        child: Column(
          children: [
            // standard タイプ
            IconButton(icon: const Icon(Icons.filter_drama), onPressed: () {}),

            // 'Filled' タイプ
            IconButton(
                icon: const Icon(Icons.filter_drama),
                onPressed: () {},
                style: IconButton.styleFrom(
                  foregroundColor: colors.onPrimary,
                  backgroundColor: colors.primary,
                  disabledBackgroundColor: colors.onSurface.withOpacity(0.12),
                  hoverColor: colors.onPrimary.withOpacity(0.08),
                  focusColor: colors.onPrimary.withOpacity(0.12),
                  highlightColor: colors.onPrimary.withOpacity(0.12),
                )),

            // Filled Tonal タイプ
            IconButton(
              icon: const Icon(Icons.filter_drama),
              onPressed: () {},
              style: IconButton.styleFrom(
                foregroundColor: colors.onSecondaryContainer,
                backgroundColor: colors.secondaryContainer,
                disabledBackgroundColor: colors.onSurface.withOpacity(0.12),
                hoverColor: colors.onSecondaryContainer.withOpacity(0.08),
                focusColor: colors.onSecondaryContainer.withOpacity(0.12),
                highlightColor: colors.onSecondaryContainer.withOpacity(0.12),
              ),
            ),

            // 外形線タイプ
            IconButton(
              icon: const Icon(Icons.filter_drama),
              onPressed: () {},
              style: IconButton.styleFrom(
                focusColor: colors.onSurfaceVariant.withOpacity(0.12),
                highlightColor: colors.onSurface.withOpacity(0.12),
                side: BorderSide(color: colors.outline),
              ),
            ),
          ],
        ),
      ),
    );
  }

styledプロパティは前述のuseMaterial3を有効化した際にのみ設定が反映されます。

トグルボタン化

トグルボタン(ボタンを押したらボタンの色が変わるボタン)として
IconButtonを利用するのに有用なプロパティとして、
isSelectedとselectedIconプロパティがあります。

isSelectedプロパティにて、ボタンが選択されたかどうかを管理し、
selectedIconプロパティでisSelectedプロパティがtrueの際のアイコンを管理します。

設定例は以下のようになります。

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool selected = false;
  @override
  Widget build(BuildContext context) {
    final ColorScheme colors = Theme.of(context).colorScheme;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Icon Button Sample'),
      ),
      body: Center(
        child: IconButton(
          icon: const Icon(Icons.settings_outlined),
          onPressed: () {
            setState(() {
              selected = !selected;
            });
          },
          isSelected: selected,
          selectedIcon: const Icon(Icons.settings),
        ),
      ),
    );
  }
}