Draw a custom shape in Flutter

This article explains how you can draw a custom shape of a star in Flutter.

1. Create a svg file for the image

- Using Figma, create a star vector for the image shared.

- Export the vector in svg format.

2. Get the Path

- You can open the svg file in 2 ways to get its contents:

i) Open through the browser and go to Inspect element

ii) Open the file using Notepad or Notepad++

• Below is the content from the svg file from step 1.

<svg width=”233" height=”233" viewBox=”0 0 233 233" fill=”none” xmlns=”http://www.w3.org/2000/svg">
<path d=”M116.5 0L143.778 88.7913L232.053 88.7913L160.637 143.667L187.916 232.459L116.5 177.583L45.0841 232.459L72.3625 143.667L0.946632 88.7913L89.2215 88.7913L116.5 0Z” fill=”#C4C4C4"/>
</svg>
- Get hold of the path string from path attribute which is:

M116.5 0L143.778 88.7913L232.053 88.7913L160.637 143.667L187.916 232.459L116.5 177.583L45.0841 232.459L72.3625 143.667L0.946632 88.7913L89.2215 88.7913L116.5 0Z

3. Implement on Flutter

- Create a new dart file with a stateful widget called CustomPath

In this class, 2 tasks will be done:

• Add the ClipPath widget
• Create a class within the same file that extends the CustomClipper that defines the path of your image and will be added in the clipper attribute of the ClipPath widget.

4.Create the class that extends the CustomClipper

• In my case, I’ll name the class as BezierClipper with its method shouldReclip().

Then add the getClip() method that is generated using this link by adding the Path from step 2.

5. Update the CustomPath class

• Add a ClipPath that will clip the CustomClipper, in this case called BezierClipper
• Then add a `Container` as its child which will conform to the new shape.

- Like this:

Happy coding.