How to draw custom shaped widgets with flutter

Question

I want to draw the below shape in flutter:

As you can see, it starts off with a sort of oval with a straight edge which then curves to make it narrower. It then goes into a rectangle. Inside, of it, it has lines that start of thin and gradually becomes thicker. The first lines are curved to match the radius of the shape, they then turn into rectangles afterwards.

How would I draw this in flutter? below the thiner part of this shape.

Edit: Sorry, forgot to say that I want to be able to control the colour of the red shapes. The black shape will be permanent and depending on the state, the red shapes will be different colours.

Answer 1

That looks like something that would most easily be done in SVG, using some sort of tool meant for that - I personally use Inkscape although it creates a lot of garbage in the svg file (which I strip out using SVGOMG ). You do have to be careful in Inkscape to makes sure it isn't creating unnecessary groupings or using transforms rather than setting coordinates directly. But then you should be able to use the flutter svg plugin to render it in your app.

However, if there's any sort of animation you're wanting to do along with your object, it gets a lot more complicated. There are two options then - the first is to laboriously convert your SVG paths to canvas paint operations (there's a few tools out there that do it for Javascript Canvas objects, which are close enough to the flutter ones that you can paste the paths in, then run a quick search/replace to get to what you need for flutter). I've done that with some of the icons used in my app which I needed before the svg plugin was made. But if you do that, then you gain complete control over how you draw it - you could use gradients, colours, etc however you want.

You could also just draw it directly using the canvas, without resorting to SVGs first. Take a look at CustomPainter and CustomPaint . Hot-reload will help you, but it's going to be a little bit of a learning curve (pun slightly intended) if you haven't used Beziers etc before.

That, however, would be a bit of a process and probably not worth it since there is an easier solution out there. Take a look at the newly re-announced Flare - the main downside is that unless you want to pay your artwork will be public (but you can stop people from forking it). Although I haven't used it extensively yet, it does seem tailor-made for this sort of thing.