Zenn
📱

【Flutter】アクセシビリティを考慮したボタン

2021/09/05に公開
Flutter
Dart
tech

動作確認環境

Flutter 2.2.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f4abaa0735 (5 weeks ago) • 2021-07-01 12:46:11 -0700
Engine • revision 241c87ad80
Tools • Dart 2.13.4

考慮するアクセシビリティ

以下を考慮したボタンにする

  1. ターゲット(ボタン)のサイズが 44 × 44 ピクセル以上である。
  2. 端末のアクセシビリティによるテキストサイズの変化に追従して適切に画面内に収める
    • テキストサイズを大きくしても、画面からはみ出さないこと

結論

  • Buttonのstyle指定でminimumSizeを44pxにする
  • 48px未満にならないButtonを縮めるためにtapTargetSizeにMaterialTapTargetSize.shrinkWrapを指定する
OutlinedButton(
  style: OutlinedButton.styleFrom(
    minimumSize: const Size(44.0, 44.0),
    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
  ),
  onPressed: () {},
  child: const Text(
    'ボタン',
  ),
),

Buttonを44pxサイズにするための過程

アクセシビリティを考慮してデザインも、最低ラインの44pxで上がってくることも多々ある。
それをそのままFlutterで実装しようとすると、標準で48pxの高さになるため一手間必要になる。

素のButton

素で実装したButton
OutlinedButton(
  onPressed: () {},
  child: const Text(
    'ボタン',
  ),
),

その解決として、SizedBoxで囲うやりかたをすると固定サイズなる。

SizedBoxを使う

SizedBoxで囲ったButton

SizedBoxで囲って実装したButton
SizedBox(
  height: 44,
  child: OutlinedButton(
    onPressed: () {},
    child: const Text(
      'ボタン',
    ),
  ),
),

しかし、2.を満たせず、テキストがはみ出たボタンとなってしまう。

アクセシビリティのテキストサイズ最大でテキストが見切れるButton

Buttonのstyleを使う

そこで、Buttonに対してstyleを使って以下のように最低サイズを指定してやる。
Containerのconstraintsで最低サイズを指定してやることもできるが、tapTargetSizeの指定が必ず必要になるので、styleで指定してやる方がスマートな形になる。

styleに対してminimumSizeだけ指定しても、Buttonは48px未満のサイズにならないため、tapTargetSizeにMaterialTapTargetSize.shrinkWrapを指定してやる。

style指定でサイズが44になったButton

最低サイズをstyle指定で行ったButton
OutlinedButton(
  style: OutlinedButton.styleFrom(
    minimumSize: const Size(44.0, 44.0),
    tapTargetSize: MaterialTapTargetSize.shrinkWrap,
  ),
  onPressed: () {},
  child: const Text(
    'ボタン',
  ),
),

こうすることで、2.の文字サイズを大きくした場合も、ボタン内にテキストが収まった形で表示される。

アクセシビリティのテキストサイズ最大でテキストが収まるButton

Discussion