Flutter Custom Paint - Made Easy with Flutter Shape Maker 🎯

Custom Paint to me is one of the most useful and powerful widgets, offered by Flutter. Almost every other day I find myself creating something unique with Custom Paint. But, with Great Power comes a lot of Complexity… At least in the beginning it might seem so.

Recently I made a tutorial on creating complex Bottom Navigation Bars or Shapes, in general, using Custom Paint, and in that, I tried to explain the concept of creating quadratic bezier curves, calculating reference points, arcs, and so on.

Plot Points for Custom Shaped bottom Navigation Bar

Even though the tutorial got a good response, I received a few questions with people asking about finding the correct reference points to create a shape on Custom Paint. I realized then, that finding these reference points seems easy to a person with a good graphics background but might be daunting to someone with little to no knowledge of such things.

Well, this gave me the motivation and idea to start with a project that could make working with Custom Paint a lot easier for Flutter Developers and this brings us to Flutter Shape Maker. 💙

Tool: https://www.fluttershapemaker.com

Here is a quick look at it:

This is a quick 55s Demonstration. Don’t worry

Although the Demonstration Above is a speed code representation, in reality, it took me not more than 4 minutes to make that. Flutter Shape Maker gives you a canvas that looks like this:

On this Canvas, you can plot the points quickly and easily, much like Pen Tool in Photoshop or other Graphic Editing Software. You also get Control Handles to manipulate the Curve between two attached points. So let’s take a look at how to use this tool at it’s best:

Step 1:

The very first thing you should do when you open the Shape Maker is to click on the “Config” button. With this you’ll get a dialog like this:

Choosing the Canvas Size is critical and is directly responsible for how responsive code you get. The trick for choosing the best possible Canvas Size is to pay attention to the Aspect Ratio of the shape you are trying to make. If you are trying to make a shape that is square, no matter what the screen size you put it on, You can simply choose a size like 500 x 500 | 700 x 700 or anything which fits in that aspect ratio of 1:1.

For the Bottom Navigation bar, I found the Aspect Ratio of 4:1 working best for me, and hence choosing a size of 800 x 200 seems to be the best option. You can find the aspect ratio base on Dimensions using this tool here.

Note: Try keeping the dimensions as multiples of 100 to get a best possible grid for now.

Now for the second option of “Responsive Code”, Take a look at the Generated Code below:

Responsive Mode “ON”

Responsive Mode “OFF”

With the Responsive Mode “On”, you can see the generated code does not take into account the exact dimensions of the Canvas, instead, it uses relative points by multiplying width and height by a factor, while this is not the case when the Responsive Mode is “Off”. You should not underestimate the usage of non-responsive code because sometime it might be a better solution for your problem.

An example of this can be a case where you have to position different Shapes in a Stack using Positioned Widget. In complex UI designs, you might even need to overflow them to go beyond the boundaries of Stack Widget. In such cases, using Responsive Shapes is a pain.

With Version 2.0, You’ll now have a new option of “Snap to Grid” which helps you in creating more precise shapes. With this option whenever you move plotted points they will snap to the nearest grid point. You can also toggle this option directly from the bottom bar on the main canvas also.

In simple words, always consider which type of code you need to get before creating a shape, Don’t Worry though… Even if you create a shape before choosing the mode you can get both Non Responsive and Responsive versions of code. It’s just a best practice to figure that out beforehand.

Step 2:

Now, once you have selected the Canvas size and Mode of your choice. You can start working on Shape. You can plot the points on canvas and move them easily. With each point you have a number of Options:

1. You can click on the point to select it and move it around the canvas.
2. You can add control handles to any selected point (Except the Origin) by using the H key on the keyboard or button on the web interface and then adjust the handles to create a curve of your choice.
3. You can delete the selected point using the Delete key on the keyboard or button on the web interface.

Note: In Point 2 you can see that i have excluded the origin point for Handles. This is just a feature under development and until it is available you can use this one point for a corner in complex shapes so as to prevent any issue. For Circular Shapes this won’t be a problem because in a closed shape, points adjacent to this origin can cover for its curves.

Now, Once the shape is made, you should always take a closer look at points to tweak them for a cleaner look. You can get a more clear view of the canvas by using the “Hide/Show Grid” and Hide/Show Points” button in the bottom right of the app. The shape i made for the Bottom Navigation Bar on Shape Maker looks something like this:

Shape Made on Flutter Shape Maker

Step 3:

Once done with the Shape, you can just click on Get Code on the top right of the application. For my Bottom Navigation Bar the shape looks something like this:

Final Custom Paint Code

In this code, you can change the Paint object as per your needs, and you are done. One thing you should keep in mind is that the Shapes you make might need some minor tweaking or optimization in some cases based on your application needs but even then, the time taken to create these shapes from scratch is reduced to a huge margin.

Voilà! ✌😁

Now you have a ready to use Custom Paint code to add to your Flutter Application.

Other Features

Now that you know the basic features of Flutter Shape Maker. Let’s move onto some more awesome stuff. Now with version 2.0 you have the new Layers Panel and Gradient Options. Let’s take a look at these features.

Here is a quick demo:

Layers Panel

This Layers Panel works mostly like any other tool like Photoshop or Illustrator. When you first open the FSM, you have one layer in the Layers Panel. Now, whatever shape you draw on the canvas, it will be added to this layer. You can add a new layer using the “+” button in the bottom bar of Layers Panel.

The order of these layers matter. Layers which are below others, appear behind the layers on top. The “Move Down” and “Move Up” buttons help you change the order of the selected layer. You can also “Duplicate” the selected layer. With these options, you can create more complex shapes and designs. Here is an example:

Gradients

With FSM 2.0 You can also add Linear and Radial Gradients to Shapes. Once you select a gradient, following windows will appear based on your Gradient choice:

Linear Gradient

Radial Gradient

In both these gradients you are given with a Color Bar. By default the Gradient Goes from Black to White but you can change to it any colors you want. You can click on the Color Indicator to Select it and set a new Color. You can also move these Indicators (except the ones on edges) to get your desired gradient.

When you Click on a Color Indicator (which you have added) you will get a button to “Delete Color Step” which you can use to delete that particular indicator if you choose to. Other than this there are also a few differences between Linear and Radial Gradient.

In Linear Gradient, you will get the “From” and “To” options. The gradient that you create will start from this given “From” position and move towards the “To”. On the other hand in case of Radial Gradient you will get the option to adjust the “Center” and the “radius” of gradient.

I expect you to use it for your projects and give your valuable feedback on how the existing features can be improved and what new features you would like to see in this Application. To Report Bugs to Request for Features via the “Report/Request” in the bottom Right corner of Main Screen. I would love to hear your ideas and suggestions.

Version 2.0 Update:

Flutter Shape Maker is Currently at Version 2.0.0 with the following Updates:

✔ Undo / Redo Upto 20 Commands

✔ Save/Open Canvas to and from FSM File (.fsm)

✔ Layers Panel

✔ Move and Point Cursors

✔ Add Gradient/Solid Fill or Stroke to your created Shapes

✔ Bug Fixes with Point Manipulation

If you like to have a visual representation for reference, check out this tutorial on my Youtube Channel and you’ll have a good idea! And while you’re there, if you find this useful, consider Subscribing and Sharing!

If you find this Useful, Consider Subscribing to RetroPortal Studio on Youtube at:

RetroPortal Studio

Here are the links to my other Social Media Handles:

Twitter: https://www.youtube.com/theretroportal

Instagram: https://www.instagram.com/retroportalstudio

LinkedIn: https://www.linkedin.com/in/parasjainrps

Github: https://github.com/retroportalstudio

Happy Coding! ✌😁