Custom Clipper Path

Sore Sardine answered on May 19, 2022 Popularity 7/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 7/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

Continue with Google

By continuing, I agree that I have read and agree to Greppers's Terms of Service and Privacy Policy.

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.