【日本語版】【Flutter】Widget of the Week – #40 Placeholder【要約】

動画

要約

• 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 一覧