Flutter Shape UI

CodingWithTashi
3 min readApr 14, 2021

Ever wonder you need a shape and you don’t know what’s name but you need it in your application.

Well my friend , this is the post you have been waiting for.

Story behind this post

  • Few month ago I have started my journey with flutter and I was happy with UI,animation and all the feature that flutter has to offer.
  • I was able make circle, rectangle with round border, sqaure and you name it .
  • But the only problem lies when I want custom shape. say rectangle with different corner shape.
  • So I did research and I am glad that I have a solution that may change your life too.

TL,DR At the end of this post you will get the treasure you are lookin for.

This beggining post will show you list of flutter custom shape that might be helpful to your application

  1. Circle

Output:

2. Modified Circle

Output:

3. Rectangle with all round border

Output:

4. Rectangle with one side round border

5. Pantagon

6. Rectangle with sharp border

7. Triangle

Output:

8.Inverted round for square and rectangle

Output:

And more will be added here….

Your hidden treasure is here, Don’t skip it

Since you are still reading this,Let me tell you one hack. What if you want custum shape (could be any) that you don’t even know the name of shape. Then what would you do. There are two option

  1. Either you could draw shape and use image to display
  2. Or you could use flutter shape maker. yes, very usedful tool that every flutter developer should know.
  • With flutter shape maker you just draw the shape in UI and you will get the flutter code. Is’t it amazing?
  • But before that check out this tutorial to get some idea about flutter shape maker.

That all,Thanks guys, I hope you like this shitty blog. please make sure to give clap 👏 and leave some engagement. let me know in comment section if you face any issue.

Checkout more blog from CodingWithTashi. Follow me on twitter or Instagram or YouTube.

--

--