【Flutter】EdgeInsetsの余白指定に関する小ネタ(.copyWith)

EdgeInsetsで余白指定する時に天啓を受けたので皆さんにも共有です。

Flutterで四方に均等な余白を指定したいとき、よく使うのはpaddingにEdgeInsets.all()指定だと思います。

例えば、すべての辺に12の余白を与える場合は次のように書きますよね。

Padding(
    padding: EdgeInsets.all(12),
    child: Text('hoge'),
),

ここで、ある一辺だけ異なる値を設定したい状況に遭遇したことはないでしょうか？
例えば、以下のように下辺だけ異なる余白を指定するケースです。

EdgeInsets.fromLTRB(12, 12, 12, 24)

もちろん fromLTRB() で良いのですが、同じ値を3つ入力しているの冗長じゃないですか？

そんな時はこうです。

EdgeInsets.all(12).copyWith(bottom: 24)

copyWith() とはなんぞや？

copyWith()は、Flutterの多くのクラスで使われるメソッドです。
既存のオブジェクトをもとに、特定のプロパティだけを変更した新しいオブジェクトを生成するためのものです。

上記のコードではEdgeInsets.all(12) で四方に12の余白を指定していますが、その後 copyWith() を使ってbottomプロパティだけを上書きし、下辺にだけ24の余白を適用しています。

最後に

私の思うこれのメリットは以下です。

• コードの簡潔さ：共通部分（上下左右の同じ値）は EdgeInsets.all() で一度に指定し、異なる部分だけ copyWith()で上書きできるのでコードがスッキリ
• 可読性の向上：fromLTRB() に比べて、どの辺が異なる値になっているか一目でわかりやすい

以上です。ありがとうございました。