FlutterのContainerで角丸のUIを実装する方法

この記事は、【 可茂IT塾 Advent Calendar 2021 】の5日目の記事です。

FlutterでのContainerで角丸を実装する方法をサクッと解説します。

Containerの角丸

全体に角丸

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: BorderRadius.circular(10),
  ),
)

一部に角丸

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.red,
    borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(50),
    ),
  ),
)

円

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    color: Colors.red,
    shape: BoxShape.circle,
  ),
)