ClipPath, Custom Painter, and Flutter CustomClipper made it fast!

Tools and techniques to create paths and convert them to cut things on Flutter.

Mauro Di Bert avatar
Oct 14, 2020
ClipPath in actionMauro Di Bert

Disclaimer: maybe you’ll find a couple more than expected links to other resources here: what I wanted was give you what I think it’s the best path to get to paths and since there is awesome stuff there in the wild, I just leave you those articles in order of recommended reading and practice, and after those, the humble things you could get from me.


The why

CustomClipper allows you to implement custom shapes into your Flutter app: you create a widget that lets you clip the child you give to it. There are a couple of other Clippers in Flutter that make common cuts accessible and ready to use like ClipRect, ClipRRect, and ClipOval, but if you want to feel you’re clipping like Picasso, those would be not enough.

To start with custom clipping, tackle easy and simple figures. Then, if you feel you’ve understood the laws of linear clipping, get crazy and try some curves.

The whole process of custom clipping by coding paths manually was instructive at first: you learn what curve béziers are, which are the main flutter commands to do it, and so on but I thought that there should be more effective ways to achieve this. I hope to show you that, next.

The what

Replicating easy things coding by hand is funny; trying to achieve more complex shapes is a pain.

Luckily my Japanese kamikaze nature encouraged me to do some Figma vector learning to create SVGs to help me convert them to Flutter paths. Stop here: if you’ve ever used Illustrator before, Figma will result familiar but go beyond and explore vector networks, and the whole suicide attempt to draw, will become a really fun experience! (Evan Wallace has a great article explaining it).

(I’ve tried a lot of things in the path and found this cool list of tools that you maybe want to look at tools to convert.)

Once the SVG was a beautiful piece of art in Figma, the endless searching for methods to convert that to a Flutter path begun. It’s worth mentioning that the code should be done in Codepen without any packages at all so that made the process a little bit more tricky (but super instructive).

Finally, Marc Gerken’s creations made me truly happy: he explains carefully how to create shapes and paths that you will use later here to create custom clips. He also developed a tool to convert those SVGs to Flutter shinny paths. With those and a little bit of practice, I was getting better at it! Spoiler alert: how to do it, finally, in the next lines.

The how

First things first: this is an example to show how to use vector tools to create an SVG fast from online images, convert that to code and clip in CodePen using just the CustomClipper, without any external packages.

1. Start by choosing what you want to create:

I wanted to copy my creation (🤯) of the iPhone XS example from this super piece of data from Deven Joshi. The idea is not to be perfect nor detailed in the creation: is to use examples that let us understand the basics and go on with another technic.

2. Plan the stack

3. Select the online images that you’ll need and paste them into Figma

4. Put those side by side, but in the stack order: from lower to higher layers

5. Create a Figma frame (right-click > frame selection), in the one that is gonna serve us as the base for the others. This will set the ruler to 0,0

6. The most tricky step of this tutorial, deconstructed

👉 Start shaping your vector network from the point 0,0 to establish where the shape you are creating is related to the original image; use guides for help.

👉 From there, go to the first point of your final shape and continue driving threw the outer part of it BUT you have to include in a kind of “ghosty way”, the limits of your original image, if not, the SVG converter tool will not know what the real size is and it’s gonna be a mess.

👉 Come back one and make some history (adjust details and close your path).

👉 Final touches, eliminate border and export the perfect SVG.

7. Go to the converter, put your file, and get the coveted code! Be careful of cut just what you need for the CustomClipper.

8. Past that on your CustomClipper and be happy!

9. Oh! Continue till your stack is done:

THANKS 🙏

I hope these few lines (I thought It was going to be shorter 😅) help you even a little in building the stuff you want. And big thanks to those who enlightened me with beautiful and super clear articles: https://educity.app/, https://iiro.dev/, Evan Wallace, Mark Gerken (https://www.flutterclutter.dev/) and Deven Joshi.

Finally to Leo and Cherta to encourage me to write this kind of stuff!