Flutter 開発で手を止めないために Placeholder のすすめ

みなさんはこんな経験ありますか？

アプリ開発をはじめたものの、

• 機能がうまく動かない
• UI がイメージ通りにならない
• ウィジェットの種類が多すぎてどれ使ったらいいかわかんねぇー

となってしまい、嫌になってコーディングから遠ざかってしまう……。

あると思います！！

チームでおこなう開発ならフォローしてもらいつつ進められるかもしれませんが、個人開発ではそうは行きません。
アプリ開発中についつい手が止まってしまう場合に、 Placeholder というウィジェットを使って開発のモチベーションを維持できるかもしれないと思ったので紹介させていただきます。

対象読者とお断り

基本的には、これから Flutter にふれる開発者や、始めたばかりの方の手助けになるように書いています。
（熟練の Flutter 使いには不要な情報かもしれませんが、ご了承くださいませ）

また、僕自身が学習中の身ですので内容がイマイチな場合もありますが、そこは優しくマサカリしてください！（コメントお待ちしています！）
また、「こんなケースではこういう解決法もあるよー」みたいな意見もいただけると嬉しいです！（コメントお待ちしています！）

手が止まってしまうシーン

📌 UI はぼんやり決まったけど、どこから手を付けていいか分からない

🌄 どんなシーン？

例えば次のような画面を作るとしましょう。

画面内には、

• AppBar
• FloatingActionButton
• 画像（なにやらグラデーションでフィルターがかかっている）
• スライダー

があるのがわかります。

これだけはっきりと UI が決まっていればよいですが、実際はぼんやりと頭にある UI からコーディングしていくわけで、 闇雲に突き進むと予想以上に時間がかかってしまったり、場合によってはひとつの難しい機能につまずいてアプリ開発そのものが嫌になってしまう なんてこともあるかもしれません。

🎠 解決案

UI がぼんやりとしているうちは、コーディングもぼんやりでよいと思います。
詳細の機能は後回しにして、とりあえずぼんやりとした UI を実装してみましょう。

具体的には次のような感じです。

どうでしょう？

「 どこに何があるのか、わかりやすい 」と感じる方が多いと思います。

Flutter には Placeholder というウィジェットが用意されており、 「詳細はまだだけど、ここに、このくらいのサイズのウィジェットを配置したいんだよなぁ」という気持ちを叶えてくれる痒いところに手の届くウィジェット となっています。

Placeholder の使い方は、

@override
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // 省略
      ),
      body: Center(
        child: Wrap(
          direction: Axis.horizontal,
          spacing: 8,
          runSpacing: 4,
          children: <Widget>[
            Center(
              child: Container(
                width: 300,

                // 画像用の Placeholder
                child: const Placeholder(),
              ),
            ),

            // スライダー用の Placeholder
            const Placeholder(
              fallbackHeight: 50,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // 省略
      ),
    );
}

のように普通のウィジットと同じように扱います。

この例だと、『画像』と『スライダー』という 2 つのウィジェットを扱いますので、まずは Wrap ウィジェットを定義して、その子ウィジェットに 2 つの Placeholder を設定しています。

少し不便なのは Placeholder 自身が高さ（ height ）や幅（ width ）を持たないため、任意に設定したい場合は Container でラップしないといけないところですかね

👏 なにがよいのか？

「べつに Placeholder 使っても変わらなくない？」と思う人もいるかもしれません。
でもそれは頭の中で UI をしっかりと思い描くことができる（そういう能力を持った）人だからだと思います。

それができない人や、そもそもプログラミングに不慣れな人にとっては「どのようにレイアウトできるか？」すらイメージが沸かない可能性もあるので、 Placeholder による視覚化 は大いに役に立つと考えています。

また、 視覚化されたウィジェットがあることで、機能を実装する際もウィジェット単位で取り組みやすくなります 。

まとめ

慣れないうちのアプリ開発は、試してはググり、ググっては試しの繰り返し でなかなかうまく行きません。
「何時間も調べてコーディングしたのにうまくいかない」つまり「コミットできない状況」を続けていると、開発することが億劫になってしまいますよね。

ひとつの機能につまづき手を止めるよりは、 プロトタイプでもいいからとりあえずコミットするという行動を取るほうが精神衛生上よい と僕は考えています。

Placeholder はその手助けをするひとつの手段として最適だと思いますので、「今まで知らなかった」「良さそうだな」と思ってくれた方はぜひ使ってみてください！