Custom Clipping using and ClipPath in Flutter

Photo by Soraya Irving on Unsplash by Paras Jain is an invaluable tool to create paths for CustomPainter and ClipPath.

I want to show you what I was able to create in an hour as a complete beginner to custom paint and paths.

This is what we want to create

A custom shaped widget which has an image with a gradient border around it.


  1. Draw a custom path from
  2. Export the code to your codebase
  3. Use the code for drawing strokes or filled shapes
  4. Repurpose the code for a path to clip widget.
  5. Build our final design

Draw a custom path from

First of all, familiarize yourself on how to use this tool by watching a video or reading the medium article.

Let’s draw our desired shape.

Our custom-drawn shape on

Export the code to your codebase

Click on the ‘Get Code’ to generate code for your shape.

Click on ‘Get Code’ in

Your code should be generated and it’s ready to copy in your project.

Code generated from

Use the code for drawing strokes or filled shapes

Drawing Strokes

The generated code by default draws using stroke painting style.
here is what it looks like.

Stroke painting style by default

Drawing Filled shape

We can change style = PaintingStyle.stroke to style = PaintingStyle.fill to get filled shape in the generated code.

Fill painting style applied

Repurpose the code for a path to clip widget

The code generates can be smartly used to extract code for the path. Which in turn can also be repurposed wherever you may need a custom shape or path.

We will try to Clip a Flutter widget by using the path information from the generated code.

Here we will use ClipPath widget along with the path information to create a clipper.

A clipped container widget with some gradient applied to it

Build our final design

For our final design, we will use the Stack widget to overlap a clipped Container widget and a clipped Image widget.

Check out my pen to see how easy it is to build custom-shaped widgets using

A custom shaped widget with a gradient border

I am proud to say that it took me approximately 1 hour to build this UI.
Especially when have never tried Paths or Custom painter.

Give a try and consider donating to the creator Paras Jain if you are in love with the tool.

Follow the creator on Twitter

Find me on Twitter

Yet another flutter developer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Logging system design for high priority failures

Playing with Oracle ASM, multipath disks, TrueNas andVirtualBox — Part 3

Implementing pagination in GraphQL and Go using gqlgen

Software Engineer vs. Data Engineer

Tower view from ground level

CSS Flexbox

Implementing the Scalable Webhook with Altostra

Hibernate Your EC2 Instances 💤

Towards Minimal, Idiomatic, and Performant Ruby Code

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Sanni Prasad

Sanni Prasad

Yet another flutter developer

More from Medium

Using FadeInImage widget in Flutter

Flutter + Firebase setup on Android & IOS

Fix AMSupportURLConnectionDelegate in your flutter app.

Flutter Native Splash