Flutter Custom Paint - Made Easy with Flutter Shape Maker 🎯

Plot Points for Custom Shaped bottom Navigation Bar
This is a quick 55s Demonstration. Don’t worry

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:

Responsive Mode “ON”
Responsive Mode “OFF”

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

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.

Linear Gradient
Radial Gradient



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Paras Jain

Paras Jain

Mobile Application and Web Developer | @Youtube Content Creator | Worship #reactjs #flutter #java #dart | youtube.com/retroportalstudio