動画
要約
- widgetのビルド中に真っ白な画面をユーザーに見せないようにしたり、ビルド前後でレイアウトがガタつくのを防ぐために、予めPlaceholderを表示しておくという方法がある。
- Placeholderを表示するための一番お手軽な方法がPlaceholder widgetを使うこと
- シンプルな実装で簡単にPlaceholderを表示させることができる
内容
widgetをビルドしている間、真っ白な画面が表示されるのはユーザーにとって不親切です。
それを防ぐために、ビルド中のwidgetが表示される予定の場所に予めPlaceholderを表示しておくという方法があります。
Placeholderを表示するための簡単な方法がPlaceholder widgetを使うことで、Placeholderはビルド中のwidgetが表示されるまで、そのwidgetの代わりとして表示させることができます。
Placeholder()

PlaceholderはContainerと同様、与えられた範囲いっぱいに広がりますが、ListViewなど子widgetのサイズを制限しない親の中でつかえるために、fallbackHeightや fallbackWidthを使用して高さや幅を制限することもできます。
Placeholder(
fallbackHeight: 50,
)
Placeholder(
fallbackWidth: 50,
)
また、Placeholderの枠線の色や太さを変えることも可能です。
Placeholder(
color: Colors.red,
)

Placeholder(
strokeWidth: 10,
)

まとめ
Widget of the Weekの#40 Placeholderの日本語翻訳版でした。
Placeholderを使うことでwidgetのビルド中もユーザーに親切なアプリをつくることができます。
■ 次の記事はこちら
#41 – RichText
■Widget of the Week まとめ
Widget of the Week 一覧