Flutter Shapes using Custom Paint


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.   

Canvas Function
  The paint function where drawing occurs. It's given both a Canvas and a Size object.  

Paint Function

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.  

shouldRepaint Function
CustomPainter has no mutable properties and so an always return false as what's drawn never changes.

So, Let's take examples for better understanding.   Create New Project   Create a new project and replace the code below in main.dart .

1. Points

Replace the code paint class: 

@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 -   

Points UI

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 -   

Line UI

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 -   

Rectangle UI

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 -   

Circle UI

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 -   

Oval UI

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 -

Arc UI

This is the way you can make Flutter shapes using Custom Paint. Hope this article will help you to make better application.

Previous
Next Post »