【Flutter】margin/paddingの設定のTips

Containerでmargin/paddingを設定する際に楽コード量を減らせる実装について共有します！

ソースコード

とりあえずコード

// これでも実装できるけど、下の方がスッキリ！
// Container(
//   color: Colors.blue,
//   padding: const EdgeInsets.only(right: 16,left: 16),
//   child: const Text(
//     'You have pushed the button this many times:',
//   ),
// ),
Container(
    color: Colors.blue,
    padding: const EdgeInsets.symmetric(horizontal: 16),
    child: const Text(
      'You have pushed the button this many times:',
    ),
),

実行したらこんな感じ。
表示内容は同じ。いえあ。

解説

元の実装である

padding:EdgeInsets.only(right: 16,left: 16)は

日本語で説明すると、
「パディングを右に16、左に16設定」　の意味になります。

それに対して、実装している内容は

padding: const EdgeInsets.symmetric(horizontal: 16),

日本語で説明すると、
「パディングを横方向に16設定」　の意味になります。

内容的には同じなので、横方向16の方がコード量は少なくなると思います！

追加の解説

・・・
もっと言うと、前実装の以下コードも改良が必要かと思います。

Dart SDK内のedge_insets.dartのソースの中身は以下になっています。

edge_insets.dart

const EdgeInsets.only({
    this.left = 0.0,
    this.top = 0.0,
    this.right = 0.0,
    this.bottom = 0.0,
  });

引数の順番として、left, top, right, bottomの順になっているので、それに習って実装すべきと思います。
なので、実装するにしても

// ↓順番が逆
padding:EdgeInsets.only(right: 16, left: 16)は

// こっちの方がいいよね！
padding:EdgeInsets.only(left: 16, right: 16)は

記事後記

以上。
作成日：2023/06/01

冷たい飲み物ばっか飲んでて最近はお腹がゆるいよー。
あと外は暑いのに屋内はクーラーキンキンだから服装が難しい。。