Zenn
👍

FlutterのPlaceholderウィジェットを使ってみた！

2021/12/11に公開
Flutter
tech

Placeholderとは

Placeholderは、実装の準備ができるまでUIコンポーネントの代わりに使用できるウィジェットです。

使い方

このウィジェットは、後から追加されるであろう場所を表すボックスを描画するウィジェットです。

開発途中でまだインターフェースが完成していないことを表すのに便利です。

デフォルトでは、プレースホルダーはコンテナに合わせてサイズ調整されます。
プレースホルダーが境界線のない空間にある場合は、与えられたfallbackWidthとfallbackHeightに従ってサイズが調整されます。

body: const Center(
        child: SizedBox(
          width: 100,
          height: 100,
          child: Placeholder(),
        ),
      ),

ClipOvalデフォルト

✖️の色や線の幅も変更することができます。

body: const Center(
        child: SizedBox(
          width: 100,
          height: 100,
          child: Placeholder(
            color: Colors.red,
          ),
        ),
      ),

ClipOvalデフォルト

body: const Center(
        child: SizedBox(
          width: 100,
          height: 100,
          child: Placeholder(
            color: Colors.red,
          ),
        ),
      ),

ClipOvalデフォルト

まとめ

・UIコンポーネントの代わりとして使用できるウィジェット
・✖️の色や線の太さも変えることができる

GitHubで編集を提案

Discussion