[Flutter]Containerの右側の枠線を角丸にするには？

どうも、ちょげ(@chogetarou)です。

Containerの右側の枠線を角丸にする方法を紹介します。

方法

Containerの右側の枠線を角丸にするには、まず引数「decoration」に「BoxDecoration」を指定します。

次に、BoxDecorationの引数「borderRadius」に「BorderRadius.horizontal」を指定します。

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.horizontal(),
  ),
),

そして、BorderRadius.horizontalの引数「right」に「Radius.circular(/*丸み*/)」を指定します。

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.horizontal(
      right: Radius.circular(/*丸み*/),
    ),
  ),
),

これでContainerの右側の枠線を角丸にすることが出来ます。

使用例

Container(
  decoration: BoxDecoration(
    borderRadius: BorderRadius.horizontal(
      right: Radius.circular(20),
    ),
    color: Colors.blue,
  ),
  height: 200,
  width: 200,
)