【flutter】Containerの角を丸くしたい！

今回はflutterで使われるContainerの角を丸くする方法を紹介したいと思います。

1.decoration

Containerの背景色、境界線、角の丸み、影などを定義するため[BoxDecoration]のインスタンスを[decoration]プロパティに指定します。

Container(
        decoration:BoxDecoration()
)

2.borderRadius

borderRadiusを使用して、角を丸くします。
BorderRadius.circular()メソッドに半径の値を指定することで、角が丸くなります。

Container(
        decoration:BoxDecoration(
            borderRadius: BorderRadius.circular(~),//()の中は角の半径を指定
    )
)

3.例

例１

Container(
                height: 150,
                width: 200,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20), 
                    color: Colors.red),
              ),

例2

Container(
                height: 100,
                width: 250,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(50),
                    color: Colors.blue),
              ),