[Flutter]Containerの枠線の上部の丸みを設定するには？

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

Containerの枠線の上部の丸みを設定する方法を紹介します。

方法

Containerの枠線の上部の丸みを設定するには、まず引数「decoration」に「BoxDecoration」を指定します。

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

この「BorderRadius.vertical」の引数「top」で上部の丸みを設定することが出来ます。

上部の丸みは、BoderRadius.circular(/*丸み*/)のように設定します。

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

以下は、使用例です。

使用例

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