今回はFlutterを使い立ての初心者がゼロから画面のデザインを実装していくときに
意識するべきポイントについて解説していきます。

これを理解しているのと理解していないのとでは
Flutterでレイアウトを組む時の楽しさが変わってくると思ってます。

ただ完全に主観ベースで話します。

4ヶ月前の知識ゼロだった自分へのメッセージでもあります。
対象の人はiOSアプリやAndroidアプリ開発は過去に経験済みだけどFlutter開発の知識がゼロの人です。

こういった方向けにこれを意識するとよりFlutterでのアプリ開発で億劫にならなくなりますよ、
というポイントについて説明します。

意識するべき3つのポイント

意識するべき3つのポイント

それでは早速、意識するべき3つのポイントを話します。

色付きContainerでウィジェットを表示させる
色付きContainerでウィジェット間の間隔を調整する
サイズ調整を行う

この3つです。
この順番でレイアウトを組み立てていけば自分の思っているデザインが必ず出来上がるようになると思います。
少なくとも僕はこれを意識してウィジェットを使っています。

それぞれ一つずつ話します。

1. 色付きContainerでウィジェットを表示させる

１つ目のポイントはContainer を使うことです。
色付きのContainerを使うというのはつまりこういう風に書きます。

Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    );

Container は背景色を設定できますので自分が好きそうなカラーを指定します。
width と height の数値は自分が作りたいデザインの大まかなサイズを指定します。
これを最初に乗せていきます。

この理由は、よくColumnにウィジェットを並べていく時に

Column全体の高さがずれてしまって載せたウィジェットが表示されない

という問題が起きていました。
この問題が起きたときは、Columnの下にContainerを入れてContainerの高さを指定していましたが
うまくいきませんでした。

埒が明かないので、一旦Columnの中に入っているウィジェットを全て消してContainerを入れてみたら表示されます(笑)。
ですのでColumnやRowの中には色付きContainerで表示されることを確認するほうが早いです。

例えば、縦にウィジェットを並べるColumnを使う場合にはこのようにしています。

Widget _sample() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      children: <Widget>[
        Container(
          width: 100,
          height: 100,
          color: Colors.blue,
        ),
        Container(
          width: 200,
          height: 150,
          color: Colors.yellow,
        )
      ],
    );
  }

これで2つのウィジェットが縦に表示されるのを確認してから次の作業に移ります。

2. 色付きContainerでウィジェット間の間隔を調整する

ある程度ColumnやRowを組み合わせて一杯にウィジェットを並べました。
TextやImageがギュウギュウに詰まっていて見栄えが悪いです(笑)。
この後にサイズ調整したい気持ちになります。

が、Flutter ではあまりサイズを指定する段階がなかったりします。
代わりにウィジェット間の間隔を調整します。

このときに使うウィジェットは

Padding (外側の余白)
Margin (内側の余白)

この２つになります。
優先的に使うのは Padding の方ですね。

というのも、IDEでAndroid Studio を使っていると指定のウィジェットにフォーカスを当てて、
「Option + Enter」のショートカットを実行した時の候補にPadding が表示されているからです。

Padding

ということでContainerの下にPaddingを敷いて余白を調整します。

Padding(
          padding: const EdgeInsets.all(8.0),
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        )

EdgeInsets では色々な余白の指定ができます。

/// left, top, right, bottom にそれぞれ 8.0 を指定
const EdgeInsets.all(8.0)

/// それぞれを指定する
const EdgeInsets.only(left: 5.0, top: 10, right: 6.0, bottom: 3.0)

/// left のみ 8.0 を指定
const EdgeInsets.only(left: 8.0)

/// top, bottom に 8.0 を指定
const EdgeInsets.symmetric(vertical: 8.0)

/// left, right に 8.0 を指定
const EdgeInsets.symmetric(horizontal: 8.0)

これをうまく使ってウィジェット間の間隔を調整します。

そして、実はpaddingとmarginはContainerのプロパティにも存在しますので
Paddingウィジェットを挟まなくても、Containerだけで使えたりします。

Container(
          width: 100,
          height: 100,
          padding: const EdgeInsets.all(8.0),
          margin: const EdgeInsets.all(4.0),
          color: Colors.blue,
        ),

ただ僕はContainerの中にpaddingを使ってしまうと見逃してしまうというミスリードが起きそうなので
Paddingウィジェットを使って調整しています。