Custom Clipping using fluttershapemaker.com and ClipPath in Flutter

Photo by Soraya Irving on Unsplash

https://fluttershapemaker.com/ 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.

Steps

1. Draw a custom path from fluttershapemaker.com
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 https://fluttershapemaker.com

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 fluttershapemaker.com

Export the code to your codebase

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

Click on ‘Get Code’ in fluttershapemaker.com

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

Code generated from fluttershapemaker.com

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 fluttershapemaker.com 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 https://fluttershapemaker.com/

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 https://fluttershapemaker.com a try and consider donating to the creator Paras Jain if you are in love with the tool.

Follow the creator on Twitter https://twitter.com/theretroportal

Find me on Twitter https://twitter.com/prasadsunny1