Drawing Custom Shapes With CustomPainter in Flutter

Learn how to use a Flutter CustomPainter to draw custom shapes and paths by creating a neat curved profile card with gradient colors. By Ahmed Tarek.

Leave a rating/review
Download materials
Save for later
Share
You are currently viewing page 4 of 4 of this article. Click here to view the first page.

Gradient Paint

You’ve created your first beautiful, custom curved shape, but your graphic designer wants you to do one more thing: add gradient colors to your curved shape.

There are different types of gradients including linear gradients, which transition through at least two colors in a straight line, and radial gradients, which transition through colors starting from a central point and radiating outward.

Right now, you’ll create a linear gradient described by three colors. Each color needs a stop to specify its position on a line from 0.0 to 1.0.

To start, go to the first line in _drawCurvedShape() and add the following code:

//1
final colors = [color.darker(), color, color.darker()];
//2
final stops = [0.0, 0.3, 1.0];
//3
final gradient = LinearGradient(colors: colors, stops: stops);

Here’s what’s going on in this code:

  1. You create a list of three colors, where the middle color is the profile color and the first and last colors are darker shades of that profile color.
  2. Then you create a list of three stops. The first is 0.0, which puts the corresponding color in the colors list at the zero position of the gradient color. The middle and the last stop specify the positions of their corresponding colors.
  3. Finally, you create a linear gradient with the given colors and stops.

Next, update the paint object in the same method to use the new linear gradient instead of a solid color:

final paint = Paint()..shader = gradient.createShader(bounds);

Here, you create a shader from the gradient object. It will fill the given bounds. Then you set the shader to be the paint object.

Finally, hot reload the app to see a gradient within the background curve:

Background curve with gradient

Congratulations! You’ve created a beautiful profile card with an eye-catching custom background shape and shading.

Where to Go From Here?

Download the final project using the Download Materials button at the top or bottom of the tutorial.

Wow, that was a lot of work! But you learned a lot, including:

  • How to prepare your custom shape on paper before coding.
  • A deep look at CustomPainter and many Flutter Painting APIs.
  • How to use Path and how to add different lines to it sequentially.
  • How to draw a curved shape in gradient colors.

To learn more about CustomPainter check out the following YouTube videos:

You can also visit this Medium article to learn how to draw custom decorations:

Feel free to share your feedback or ask any questions in the comments below or in the forums. Thank you!

Ahmed Tarek

Contributors

Ahmed Tarek

Author

Joe Howard

Tech Editor

Sandra Grauschopf

Editor

Julia Zinchenko

Illustrator

Aldo Olivares

Final Pass Editor

Brian Kayfitz

Team Lead

Over 300 content creators. Join our team.