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.   

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

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.  

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 .

View Source Code

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 -   

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.

• Tweet
• Share
• Share
• Share
• Share

About Flutter Fact

FlutterFact.com will provide all information works with existing code, is used by developers and organizations around the world, and is free and open source for creating beautiful, natively compiled application for mobile (both android and iOS), web and desktop from a single codebase.

Related Post