[Flutter]Containerの枠線を曲線にするには？

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

Containerの枠線を曲線にする方法を紹介します。

方法

Containerの枠線を曲線にするには、CustomClipperとClipRectを使います。

まず、CustomClipperを用意します。

class CurveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    //切り取り方の設定。ここを曲線にする
    Path path = Path()
      ..addOval(
        Rect.fromLTWH(
          0,
          0,
          size.width,
          size.height,
        ),
      );

    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

getClipメソッド内で、Pathを使って曲線で切り取るように設定します。

次に、ContainerをClipPathのchildに指定します。

そして、ClipPathの引数「clipper」に用意したCustomClipperを指定します。

ClipPath(
  clipper: CurveClipper(),
  child: Container(
    color: Colors.red,
    height: 200.0,
    width: 300,
  ),
)

まとめ

Containerの枠線を曲線にするには、CustomeClipperで曲線のPathを指定し、ClipPathでContainerを切り抜きます。