ClipPath in Flutter

199

In this tutorial, we will discuss about ClipPath in flutter. Here, we will discuss with an examples.

Constructor of ClipPath

(new) ClipPath ClipPath({
  Key? key,
  CustomClipper<Path>? clipper,
  Clip clipBehavior = Clip.antiAlias,
  Widget? child,
})

Code Implementation

ClipPath(
              clipper: TriangleClipper(),
              child: Image.asset(
                "assets/Images/image.jpg",
              ),
            ),

We also have to create class for clipper. so, here is the code for clipper class.

import 'package:flutter/material.dart';

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

    return path;
  }

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

Output

Another Example

ClipPath(
                clipper: MyCustomClipper(),
                child: Container(
                  height: 300,
                  width: double.infinity,
                  color: Colors.redAccent,
                  child: const Center(
                    child: Text(
                      "ClipPath Example",
                      style: TextStyle(
                          fontSize: 16.0,
                          fontWeight: FontWeight.w600,
                          color: Colors.white),
                    ),
                  ),
                )),

CustomClipper.dart

class MyCustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(0, size.height);
    path.quadraticBezierTo(
        size.width * 0.05, size.height - 100, size.width, size.height);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

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

Here is the github link of this project:

https://github.com/NilamPathak578/flutterHopeProjects/tree/clipRRect

Thank you for reading this article. If you have any queries regarding any topic, feel free to share with us. We will try to solve your problems.

Happy Learning.

Follow me here:

Leave A Reply

Your email address will not be published.