Padding（またはMargin）だけが目的でContainerを使うのは間違ってる（というか分かりづらい） -Flutter-

この記事は Flutter Advent Calendar 2018 向けの記事です。

・レイアウト調整の目的でPadding付きのContainerでラップすると分かりづらくない？
・調整用のカスタムWidgetを作って挟み込むと良いのでは？
・「コードが短くなる」「ネストは深くならない」というメリットも！

高レベルなネタが多そうな中、こんな感じで背伸びせず軽い感じでいってみたいと思います。

Row(
  children: [
    Icon(Icons.folder),
    Container(
      padding: EdgeInsets.only(
        left: 16,
      ),
      child: Text("hogehoge"),
    ),
  ],
),

Flutterに限った話でもないのですが、コンポーネント？モジュール？ベースだけどGUIでポチポチ設定するわけではない環境？ツール？でUIを組むときはこんな感じになるときが多いと思います。

この場合は同じ行にアイコンとタイトルを並べて表示させています。
そのままではアイコンとテキストが近寄りすぎてしまうため、Containerでラップしてpaddingを指定しているわけです。Paddingでラップするときでも同様ですね。

こんな感じで2つくらいであれば別に見づらくなるわけではないですが、これがもし5つ並んだらどうでしょう？もし一括でpaddingの値を調整敷くなったらどうしましょう？

ということで、こういう場合はこうすると良いのでは？という話です。前置き長い。

Row(
  children: [
    Icon(Icons.folder),
    SpaceBox.width(16),
    Text("hogehoge"),
  ],
),

こうすることで、アイコンとテキストの間に幅16の間隔があるってことがわかりやすくなったと思いませんか？
副次的な面だと行数も少なくなってますし、ネストも深くなってません。

実装的には

class SpaceBox extends SizedBox {
  SpaceBox({double width = 8, double height = 8})
      : super(width: width, height: height);

  SpaceBox.width([double value = 8]) : super(width: value);
  SpaceBox.height([double value = 8]) : super(height: value);
}

な感じでカスタムWidgetを作ります。

サイズを指定しなければデフォルト値を利用し、必要に応じて値を指定できるようにしてあります。
直接SizedBoxを利用してもいいのですが、カスタムWidgetにすることでアプリのすっきりさに合わせてデフォルト値を指定できるようになります。

Dartはコンストラクタの定義が柔軟なのでわかりやすい上にスッキリ書けて良いですね。

・デフォルト値を設定することで逐一値を設定しなくても良い
・Containerで包んでないので配置がわかりやすい
・コードの行数やネストを抑えることができる

というメリットがあるので、みなさんも積極的に採用してみてはどうでしょう。

・・・

Qiita向けのこの記事とは別に、アドベントカレンダー形式で24回に渡ってアプリを作るというチュートリアルのマガジン作っています。気になる方はぜひ見てみてください。

ひとりアドベントカレンダー Flutter編 2018｜nbht｜note

また、時々Twitterにも顔を出してます。フォローして友達にしてやってください。