Photo by Callum Wale on Unsplash

In this article you are going to learn how to draw custom shapes in your flutter application. This will make your app more beautiful.

In the end of the article we are going to achieve the clean result from the picture below. You can find the Github source in the end of this article.

Our final result!

For drawing Custom Shapes you will need a CustomPaint widget which has a painter property. You will set your drawing to the painter property and you are good to go.

Start by setting up your basic application structure.

import 'package:flutter/material.dart';



main() {

runApp(MyApp());

}



class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MaterialApp(

title: 'Drawing Paths',

home: Container(

color: Colors.white,

child: CustomPaint(

painter: CurvePainter(),

),

),

);

}

}

I wrapped the application to a Container and set its background to white. Then we have the CustomPaint which takes the CurvePainter() as the painter .

CurvePainter() is a custom class we will be creating that contains our drawing. This is going to be called CurvePainter because we will be drawing a curved shape in the end. But for now we are going only to draw some simple paths to make you an example.

The Drawing

The class structure for the drawing is going to be the one below.

class CurvePainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint();

// TODO: Set properties to paint



var path = Path();



// TODO: Draw your path



canvas.drawPath(path, paint);

}



@override

bool shouldRepaint(CustomPainter oldDelegate) {

return true;

}

}

In this class you have:

The canvas that is your board. The paint that is your brush. The path that is your drawing. The size that is your board size.

I will try to explain you about the size variable by only using the picture below. The path will always start in the (0,0) position.

Understanding the size variable

Drawing a Line

To draw a line in the screen you are going to use the lineTo(double x, double y) method.

class CurvePainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint();

paint.color = Colors.green[800];

paint.style = PaintingStyle.stroke;

paint.strokeWidth = 2.0;



var path = Path();



path.lineTo(size.width, size.height);



canvas.drawPath(path, paint);

}



@override

bool shouldRepaint(CustomPainter oldDelegate) {

return true;

}

}

First of all, we set our paint (brush) properties. Then, we draw a line to the end of the screen. This is going to output the following result.

The output for the previous exercise.

Drawing an Arc

To draw a curved shape in the screen you will need to use the method quadraticBezierTo(double x1, double y1, double x2, double y2) .

This is going to move the path from the current point to the given point (x2,y2), using (x1,y1) as the control point.

I will show you a picture with a sketch of the drawing I want to make and then we will see it in action.

We are going to do the following steps:

Move to A, the starting point. Do a Quadratic Bezier to C, having B as a control. Draw a line to D. Draw a line to E.

class CurvePainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint();

paint.color = Colors.green[800];

paint.style = PaintingStyle.fill; // Change this to fill



var path = Path();



path.moveTo(0, size.height * 0.25);

path.quadraticBezierTo(

size.width / 2, size.height / 2, size.width, size.height * 0.25);

path.lineTo(size.width, 0);

path.lineTo(0, 0);



canvas.drawPath(path, paint);

}



@override

bool shouldRepaint(CustomPainter oldDelegate) {

return true;

}

}

The result for the exercise above.

Finally, our drawing goal

I think that doing a sketch before with the points you will use makes it much clearer. That is why I will show you a sketch again and then we will draw it.

Our sketch.

We are going to do the following steps:

Move to A, the starting point. Do a Quadratic Bezier to C, with B as a control. Do a Quadratic Bezier to E, with D as a control. Close the drawing by drawing two lines.

class CurvePainter extends CustomPainter {

@override

void paint(Canvas canvas, Size size) {

var paint = Paint();

paint.color = Colors.green[800];

paint.style = PaintingStyle.fill;



var path = Path();



path.moveTo(0, size.height * 0.9167);

path.quadraticBezierTo(size.width * 0.25, size.height * 0.875,

size.width * 0.5, size.height * 0.9167);

path.quadraticBezierTo(size.width * 0.75, size.height * 0.9584,

size.width * 1.0, size.height * 0.9167);

path.lineTo(size.width, size.height);

path.lineTo(0, size.height);



canvas.drawPath(path, paint);

}



@override

bool shouldRepaint(CustomPainter oldDelegate) {

return true;

}

}

Our final result again!

The Github source for this project.