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

動画

要約

  • widgetのビルド中に真っ白な画面をユーザーに見せないようにしたり、ビルド前後でレイアウトがガタつくのを防ぐために、予めPlaceholderを表示しておくという方法がある。
  • Placeholderを表示するための一番お手軽な方法がPlaceholder widgetを使うこと
  • シンプルな実装で簡単にPlaceholderを表示させることができる

内容

widgetをビルドしている間、真っ白な画面が表示されるのはユーザーにとって不親切です。

それを防ぐために、ビルド中のwidgetが表示される予定の場所に予めPlaceholderを表示しておくという方法があります。

Placeholderを表示するための簡単な方法がPlaceholder widgetを使うことで、Placeholderはビルド中のwidgetが表示されるまで、そのwidgetの代わりとして表示させることができます。

Placeholder()
widgetのビルド中、それぞれのwidgetの完成予定地にPlaceholderを表示できる

PlaceholderはContainerと同様、与えられた範囲いっぱいに広がりますが、ListViewなど子widgetのサイズを制限しない親の中でつかえるために、fallbackHeightや fallbackWidthを使用して高さや幅を制限することもできます。

Placeholder(
    fallbackHeight: 50,
)
Placeholder(
    fallbackWidth: 50,
)

また、Placeholderの枠線の色や太さを変えることも可能です。

Placeholder(
    color: Colors.red,
)
colorをredに変更
Placeholder(
    strokeWidth: 10,
)
widthを10に変更

まとめ

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

Placeholderを使うことでwidgetのビルド中もユーザーに親切なアプリをつくることができます。

■ 次の記事はこちら
#41 – RichText

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