Drawing Custom Shapes With CustomPainter in Flutter

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:

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:

• Custom painting in Flutter — Flutter In Focus
• Use CustomPaint to Create a Drawing App (The Boring Flutter Development Show, Ep. 28)

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

• Flutter Custom Decoration

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