Breaking News: Grepper is joining You.com. Read the official announcement!

Custom Clipper Path

Sore Sardine answered on May 19, 2022 Popularity 6/10 Helpfulness 1/10

answer Custom Clipper Path

Custom Clipper Path

Comment

class CustomClipQuad extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double w = size.width;
    double h = size.height;

    Path path = Path()
      ..lineTo(0, h)
      ..lineTo(w * 0.1, h)
      ..quadraticBezierTo(w * 0.5, h * 0.3, w - (w * 0.1), h)
      ..lineTo(w, h)
      ..lineTo(w, 0);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false; //
  // if we use it in 'StatefullWidget' should return  true
}


// ### Use it 

@override
Widget build(BuildContext context) {
  final double screenHeight = MediaQuery.of(context).size.height;

  return Scaffold(
    appBar: AppBar(
      title: const Text('Custom Clipper Path'),
    ),
    body: ClipPath(
      clipper: CustomClipQuad(),
      child: Container(
        alignment: Alignment.center,
        color: const Color.fromARGB(255, 223, 106, 10),
        width: double.maxFinite,
        height: screenHeight * 0.2,
        child: const Text(
          'QuadraticBezier',
          style: TextStyle(
              color: Colors.white, fontSize: 28, fontWeight: FontWeight.bold),
        ),
      ),
    ),
  );
}

Popularity 6/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: clipper path whatever

Link to this answer
Share Copy Link

Contributed on May 19 2022

Sore Sardine

0 Answers Avg Quality 2/10

Custom Clipper Path

Contents

More Related Answers

Custom Clipper Path

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.