【flutter】marginを使ってcontainerの周りに余白をつけたい

こんにちは！
今回は、containerの周りに余白をつけるため、marginを使って余白をつける方法を紹介していきたいと思います。最後まで見ていただけたら、嬉しいです！

1,余白をつけるためのmarginとは？

marginとは、EdgeInsetsというデータ型を受け取り、上下左右それぞれのマージンを設定するためのオブジェクトを利用します。

具体的なプロバティ

プロパティ	説明
`EdgeInsets.all(double value)`	上下左右の辺すべてに同じマージンを設定します。
`EdgeInsets.only({ double? left, double? top, double? right, double? bottom })`	指定した辺にだけマージンを設定します。
`EdgeInsets.symmetric({ double? vertical, double? horizontal })`	垂直方向と水平方向の2つの辺に同じマージンを設定します。

2,containerを作ろう

今回は、縦と横の余白を紹介したいので、縦並びのcontainer３つと横並びのcontainer３つを例にとって紹介します。
しかし、二つの画像から分かる通り、containerの間に余白をつけなければ少し窮屈に見えてしまいますね...

縦並び

横並び

3.青色のcontainerにmarginを設定しよう！

今回はcontainerが3個並んでいるため、真ん中の青色のcontainerにmarginを使って余白をつけていきます。

縦並び

垂直方向(上下)に余白をつけるため、EdgeInsets.symmetric(vertical:~)を利用

 Container(
        width: 100,
        height: 100,
        margin: EdgeInsets.symmetric(vertical: 30),//垂直方向の余白を指定
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            border: Border.all(color: Colors.blue)),
            color: Colors.white
) 

横並び

水平方向(左右)に余白をつけるため、EdgeInsets.symmetric(horizontal:~)を利用

 Container(
        width: 100,
        height: 100,
        margin: EdgeInsets.symmetric(horizontal: 30),//水平方向の余白を指定
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(20),
            border: Border.all(color: Colors.blue)),
            color: Colors.white
) 

おわり

以上で、今回の記事を終了いたします！
今回もお読みいただき、ありがとうございました！