A Guide to Using ClipPath for Custom Shapes
Published: 2023-02-10 13:34:56

In this comprehensive guide, we will delve into the world of Flutter's ClipPath and Path widgets. By the end of this article, we will have a clear understanding of how to use the ClipPath widget to draw complex shapes and how the Path widget can be utilized to define the shape that is used to clip the child widget. In this article we will have the following output.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsoz4ebr1nvrndb6o67r.png)

ClipPath is a widget in Flutter that can be used to clip another widget using a custom `clipper`. A `clipper` is an object that defines the shape that is used to clip the child widget. In Flutter, the `Path` widget can be used as a clipper to create complex shapes.

In this article, we'll demonstrate how to use the `ClipPath` widget with a `Path` clipper to draw a star shape.

First, let's create a `Path` that defines the shape of the star. We'll use the `moveTo` method to set the starting point of the `Path`, and then we'll use the `lineTo` method to add several lines that connect to the starting point and form the shape of the star.

```
Path _starPath() {
  return Path()
    ..moveTo(50.0, 0.0)
    ..lineTo(61.0, 35.0)
    ..lineTo(98.0, 35.0)
    ..lineTo(68.0, 58.0)
    ..lineTo(79.0, 95.0)
    ..lineTo(50.0, 70.0)
    ..lineTo(21.0, 95.0)
    ..lineTo(32.0, 58.0)
    ..lineTo(2.0, 35.0)
    ..lineTo(39.0, 35.0)
    ..close();
}
```

**moveTo** property in the `Path` widget in Flutter is used to set the starting point of the `Path`. It takes two arguments: `double x` and `double y`, which represent the x and y coordinates of the starting point.

The `moveTo` method is typically called first when defining a `Path`, as it sets the starting point for the subsequent path elements. For example, you might use the `moveTo` method to set the starting point for a line or curve, or to start a new subpath.

**lineTo** property in the `Path` widget in Flutter is used to add a straight line segment to the `Path`. It takes two arguments: `double x` and `double y`, which represent the x and y coordinates of the end point of the line segment.

The `lineTo` method is typically called after the `moveTo` method to add a straight line segment to the `Path`. The line segment starts at the last point in the `Path`, which is set by the previous `moveTo` or `lineTo` method.


Next let's create a custom `clipper` class that extends the `CustomClipper<Path>` class. This class is used to define the shape that is used to clip the child widget. We'll pass an instance of this class as the `clipper` argument to the `ClipPath` widget.

```
class _StarClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    return _starPath();
  }

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

In this code, the `_StarClipper` class extends the `CustomClipper<Path>` class and implements the `getClip` method. The `getClip` method takes the `Size` of the child widget as an argument, and it returns the `_starPath` as the shape that is used to clip the child widget.

The `shouldReclip` method returns `false`, which means that the clipper will not be re-clipped unless the underlying data changes.

After that let's use the `ClipPath` widget to clip a child widget with the star shape. We'll pass the `_StarClipper` method as the clipper argument to the `ClipPath` widget.

```
ClipPath(
  clipper: _StarClipper(),
  child: Container(
    width: 100.0,
    height: 100.0,
    color: Colors.yellow,
  ),
),
```

In this code, the `ClipPath` widget takes a `Container` widget as its child. The `Container` widget has a width of 100.0 and a height of 100.0, and it's filled with the color yellow. The ClipPath widget uses the `_StarClipper` method as its clipper, which clips the child Container widget into a star shape.


Here's the full code for the `ClipPath` example:

```
class StarClippingExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ClipPath(
          clipper: _StarClipper(),
          child: Container(
            width: 100.0,
            height: 100.0,
            color: Colors.yellow,
          ),
        ),
      ),
    );
  }
}

Path _starPath() {
  return Path()
    ..moveTo(50.0, 0.0)
    ..lineTo(61.0, 35.0)
    ..lineTo(98.0, 35.0)
    ..lineTo(68.0, 58.0)
    ..lineTo(79.0, 95.0)
    ..lineTo(50.0, 70.0)
    ..lineTo(21.0, 95.0)
    ..lineTo(32.0, 58.0)
    ..lineTo(2.0, 35.0)
    ..lineTo(39.0, 35.0)
    ..close();
}

class _StarClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    return _starPath();
  }

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

In this example, we've created a ClipPath widget that uses a Path clipper to clip a yellow Container into a star shape. By using the ClipPath widget and the Path clipper, we can easily create complex shapes to clip child widgets in Flutter.