Dart

47. 初心者がFlutterでデザインするときに意識すべき3つのポイント

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

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

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

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

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

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

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

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

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

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

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

1つ目のポイントは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 (内側の余白)

この2つになります。
優先的に使うのは 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ウィジェットを使って調整しています。

3. サイズ調整を行う

最後にポイント2 まででウィジェットのサイズがどうしてもハマらない時は
最終手段でウィジェットにサイズを指定して距離間を調整しています。

ポイント1 やポイント2 でレイアウトを調整したあとに
Containerを削除して自分が使いたいウィジェットに置き換えます。

そのあとにデザインの微調整をしようとするのですが、
やっぱりColumnやRowを使っているとサイズがうまく調整できないことがよくあります。

その時はその使いたいウィジェットの下にContainer を載せます。
結局Containerのwidthやheightを使ってウィジェット間のレイアウトを調整します。

特にRowウィジェットの中にColumnが存在するところから頭が混乱し始めるので、
その時は諦めてContainerやPaddingで距離感を調整することが多かったです。

そのため、ポイント3はこちらのサイズ調整をさせていただきました。

以上です

上記の1~3 のポイントを抑えておくと
Columnの中にあるRowの調整やRowの中にあるColumnの中のウィジェットを
うまく置けるようになります。

Columnの中にRowを置くならGridViewを使えばいいのでは?と思うかもしれません。
ですが例えば、下のようなデザインではGridViewを使うのは適切ではない気がします。

GridViewが使えなさそうなサンプル

今回の3つのポイントはこのデザインを作るときに気づいたことを言語化してみたのがキッカケです。

今回の記事で話しましたポイントを意識すればより複雑なデザインをFlutter で作れると思います!

それでは、バイバイ。

ABOUT ME
tamappe
都内で働くiOSアプリエンジニアのTamappeです。 当ブログではモバイルアプリの開発手法について紹介しています。メインはiOS、サブでFlutter, Android も対応できます。 執筆・講演のご相談は tamapppe@gmail.com までお問い合わせください。