【Flutter】ClipPathとCustomClipperを使用して既存のWidgetを切り抜く方法

Flutterで複雑な形をしたWidgetを描画するには様々な方法があります。

その中で、ClipPathとCustomClipperを使用して既存のWidgetを切り抜く方法についてコードを用いてわかりやすく解説します。

ClipPathとCustomClipper

既存のWidgetを切り抜くにはClipPathとCustomClipperを使用します。

ClipPathは、CustomClipperで指定したPathを使用してWidgetを切り抜くWidgetです。

例

1辺の長さが300の正方形を切り抜いてみます。

class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    // 正方形の左上が(0, 0)、右下が(300, 300)
    final path = Path();

    // 左上に移動（開始地点）
    path.moveTo(0, 0);

    // 右の真ん中まで直線で切り抜く
    path.lineTo(size.width, size.height / 2);

    // 左下まで直線で切り抜く
    path.lineTo(0, size.height);

    return path;
  }

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

ClipPath(
  clipper: MyCustomClipper(),
  // 1辺の長さが300の正方形
  child: Container(
    color: Colors.amber,
    width: 300,
    height: 300,
  ),
)

三角形になりました。

まとめ

既存のWidgetを元にすることですべてを1から描画する必要がなく、とても楽に描画することができました。

Flutterで複雑な形をしたWidgetを描画するには様々な方法があるので、そちらもぜひ調べてみてください。