FlutterのPlaceholderとは？どんな時に使うの？

FlutterのPlaceholderウィジェットは、UIの開発中にプレースホルダーとして機能するシンプルなウィジェットです。このウィジェットは、実際のUI要素が実装されるまでの代替のウェジットとして使用します。この記事では、Placeholderウィジェットの基本的な使い方を紹介します。

Placeholderの基本的な使い方

Placeholderウィジェットは、他のウィジェットと同様に、ただ画面に追加するだけです。

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Placeholder(),
  );
}

実行すると、次のような結果になります。
このコードは、アプリのボディ部にグレーのボックスを表示しており。後で実際のウィジェットに置き換えられる予定の場所を示しています。

カスタマイズ

Placeholderウィジェットはカスタマイズが可能です。color、strokeWidth、およびfallbackWidthおよびfallbackHeightプロパティを使用して、見た目を調整することができます：

Placeholder(
  color: Colors.blue,
  strokeWidth: 2.0,
  fallbackWidth: 150.0,
  fallbackHeight: 150.0,
)

この例では、プレースホルダーを青色の枠で、幅と高さを150ピクセルに設定しています。

Placeholderの活用例

Placeholderウィジェットを活用する一つの方法は、レイアウトのプロトタイピングです。
例えば、複数のウィジェットを配置する際に、どのように見えるのか確認できます。

以下のコードでは、3つの等間隔のプレースホルダーを含む行を作成します。横方向のサイズはfallbackWidthで指定します。

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Placeholder(fallbackWidth: 100),
    Placeholder(fallbackWidth: 100),
    Placeholder(fallbackWidth: 100),
  ],
)

実行すると、次のような結果になります。

このように、実際のウィジェットを配置する前のレイアウトの調整をするのがPlaceholderの活用方法です。

まとめ

FlutterのPlaceholderウィジェットは、アプリケーションの開発過程で非常に便利なツールです。このウィジェットを使用することで、UIの構造を素早く試したり、チームメンバーにデザインのアイデアを示したりすることができます。そのシンプルさとカスタマイズの容易さにより、どんなFlutter開発者にもおすすめのウィジェットです。