Flutter Shapes using Custom Paint In this article, we will create some Flutter shapes using Custom Paint. So first let's take a look at the crazy world of custom paint widget. What exactly is Custom Paint? Custom Paint is a widget that provides you with a canvas and takes a custom painter to execute paint commands.
Custom Paint widget takes a painter and a child in its constructor. The painter is an instance of the Custom Painter class, and this is where the painting magic happens. Let's focus on Custom Painter where canvas drawing takes place. Subclassing from CustomPainter requires two functions to be overridden -- paint and shouldRepaint.
All drawing commands should occur within the bounds of the given size. Circles, lines, rectangles, and many other shapes can all be easily drawn on the canvas with different drawing functions. You can change the properties of how these shapes are painted by customizing the paint object provided to each drawing function. We also need to implement shouldRepaint, which controls when the painter should redraw.

So, Let's take examples for better understanding. Create New Project Create a new project and replace the code below in main.dart .
@override
void paint(Canvas canvas, Size size) {
final pointMode = ui.PointMode.points;
final points = [
Offset(50, 100),
Offset(150, 75),
Offset(250, 250),
Offset(130, 200),
Offset(270, 100),
];
final paint = Paint()
..color = Colors.black
..strokeWidth = 4
..strokeCap = StrokeCap.round;
canvas.drawPoints(pointMode, points, paint);
}
Important Note: An Offset
is a pair of (dx, dy)
doubles, offset from the top left corner, which is (0, 0)
. Now run the above code. The outcome will be -
2. Lines Replace the code paint class:
@override
void paint(Canvas canvas, Size size) {
final p1 = Offset(50, 50);
final p2 = Offset(250, 150);
final paint = Paint()
..color = Colors.black
..strokeWidth = 4;
canvas.drawLine(p1, p2, paint);
}
Now run the above code. The outcome will be -
3. Rectangles Replace the code paint class:
@override
void paint(Canvas canvas, Size size) {
final left = 50.0;
final top = 100.0;
final right = 250.0;
final bottom = 200.0;
final rect = Rect.fromLTRB(left, top, right, bottom);
final paint = Paint()
..color = Colors.black
..style = PaintingStyle.stroke
..strokeWidth = 4;
canvas.drawRect(rect, paint);
}
Now run the above code. The outcome will be -
4. Circles Replace the code paint class:
@override
void paint(Canvas canvas, Size size) {
final center = Offset(150, 150);
final radius = 100.0;
final paint = Paint()
..color = Colors.black
..style = PaintingStyle.stroke
..strokeWidth = 4;
canvas.drawCircle(center, radius, paint);
}
Now run the above code. The outcome will be -
5. Ovals Replace the code paint class:
@override
void paint(Canvas canvas, Size size) {
final rect = Rect.fromLTRB(50, 100, 250, 200);
final paint = Paint()
..color = Colors.black
..style = PaintingStyle.stroke
..strokeWidth = 4;
canvas.drawOval(rect, paint);
}
Now run the above code. The outcome will be -
6. Arcs You have to import a library here: import 'dart:math' as math; Replace the code paint class:
@override
void paint(Canvas canvas, Size size) {
final rect = Rect.fromLTRB(50, 100, 250, 200);
final startAngle = -math.pi / 2;
final sweepAngle = math.pi;
final useCenter = false;
final paint = Paint()
..color = Colors.black
..style = PaintingStyle.stroke
..strokeWidth = 4;
canvas.drawArc(rect, startAngle, sweepAngle, useCenter, paint);
}
Now run the above code. The outcome will be -
This is the way you can make Flutter shapes using Custom Paint. Hope this article will help you to make better application.
ConversionConversion EmoticonEmoticon