【日本語版】【Flutter】Widget of the Week – #47 Semantics【要約】

動画

要約

  • スクリーンリーダーや検索エンジンなどのセマンティクスに情報を伝えるためのwidgetがSemantics
  • disableやhintなど、widgetの50を超えるプロパティを設定することができる

内容

ご存知の通り、FlutterはUIの見た目や振る舞いを指定できるwidgetが数多く用意されています。

しかし、それ以外の目的を持つwidgetもあります。

Semanticsはwidgetの状態や属性など、つまり、そのwidgetがどんな意味を持っているかを外部に伝えるためのwidgetです。

例えば、下のイメージのように画面に2つのwidgetが表示されているとしましょう。

1つはアバターの画像で、もう1つはその後ろのbackgroundです。
 

まるいimageと後ろの青いbackground

この場合、重要なのはアバターで、backgroundはそれほど重要ではありません。

このような情報は、スクリーンリーダーや検索エンジン、その他のセマンティクスツールが知っておくべきことです。

対象のwidgetをSemantics widgetでラップすることで、セマンティクスツールに属性情報を伝えることができます。

Semanticsには、text descriptionsやenable/disable、input or read-onlyなど、様々な属性を指定することができます。
 

widgetをSemanticsでラップし、label, enabled, readOnlyを指定

指定できる属性は50種類以上もあります。

Semanticsを使うことで様々な情報をセマンティクスツールに伝えることができるようになります。

まとめ

Widget of the Weekの#47 Semanticsの日本語翻訳版でした。

様々なユーザーが使いやすいアプリを作りたい場合、セマンティクスへの対応は必要になります。

Semantics widgetを使うことでシンプルにセマンティクスに情報を提供することができます。

■ 次の記事はこちら
作成中

■Widget of the Week まとめ
Widget of the Week 一覧