🌊

[Flutter] Tooltip

2022/12/08に公開

Tooltipでアイコンや画像を囲んで、Tooltipメッセージを添付することで、アクセシビリティを向上させる（意味を持たせる）ことができる
ex)画像やアイコンが多くて、タップできるものがぼやけてしまう
ex)目の不自由な方にはアイコンだけだと理解しにくいこともある

Tooltip(
 message: 'Dash',
 verticalOffset: 48,
 height: 24,
 child: MyVisualWidget(), 
)

・messageにKeywordを入れるだけ
・ユーザーがUIをタップしたり、長押ししたりとアクションを起こしたら、Tooltipがメッセージをセマンティックにエクスポートし、スクリーンリーダーが読み上げる
・IconButtonなどのマテリアルウィジェットはTooltipを含むため、メッセージテキストを追加するだけ

IconButton(
 icon: Icon(Icons.high_quality),
 tooltip: 'High  Quality',
)

プロパティ

verticalOffset: ツールヒントが対応するウィジェットの下に配置される垂直方向のスペースの量を定義する
height: 高さ

Tooltip

プロパティ

Discussion