Custom Clipping using fluttershapemaker.com and ClipPath in Flutter
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.
- Draw a custom path from fluttershapemaker.com
- Export the code to your codebase
- Use the code for drawing strokes or filled shapes
- Repurpose the code for a path to clip widget.
- Build our final design
Draw a custom path from https://fluttershapemaker.com
Let’s draw our desired shape.
Export the code to your codebase
Click on the ‘Get Code’ to generate code for your shape.
Your code should be generated and it’s ready to copy in your project.
Use the code for drawing strokes or filled shapes
The generated code by default draws using stroke painting style.
here is what it looks like.
Drawing Filled shape
We can change style = PaintingStyle.stroke to style = PaintingStyle.fill to get filled shape in the generated code.
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.
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/
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