Adding a background color to ClipPath not working

Issue

How can I add a background color to a custom ClipPath?

Tried the following but it isn’t working

ClipPath(
    clipper: MyClipper(),
    child: Container(color: Colors.yellowAccent),
)

class MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final Path path = Path();
    path.moveTo(0, 0);
    path.lineTo(size.width - 10, 0);
    path.lineTo(size.width, size.height / 2);
    path.lineTo(size.width - 10, size.height);
    path.lineTo(0, size.height);
    path.lineTo(0, 0);
    path.close();

    return path;
  }

  @override
  bool shouldReclip(MyClipper oldClipper) => false;
}

Solution

The container with the color probably doesnt have a size try adding height and width of double.infinity or the size you want it to be

Answered By – Pieter van Loon

Answer Checked By – Senaida (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *