Integrating CustomPaint in Flutter Widgets

Flutter has established itself as the standard choice among developers since it allows for the creation of stunning user interface designs at the necessary framerate. We will give you a brief overview of CustomPaint in this blog and provide instructions on creating a Flutter app development with a CustomPaint design, improving the application’s user interface.

What is CustomPaint in Flutter?

The Flutter SDK’s CustomPaint widget allows you to draw various shapes on a canvas. It has the following characteristics:

1. Painter:

The painter paints before the child is painted. In this case, Custom Painter must be extended.

2. Size:

The size of this Custom Painter is initially equal to size.zero, which says that it will not display if no child or size is defined.

3. Foreground Painter:

The painter who follows the children in the foreground. A class that extends the CustomPainter class is also necessary.

4. Child:

The widget beneath is widget tree.

You can either specify a size property without a child when using CustomPaint, or you can use the child property to give it a Flutter widget.

The CustomPainter Class

From CustomPainter extends the class ExampleCustomPainter, which is an abstract class, two methods must be included within it:

1. paint: It is called whenever the object is essential to be repainted.
2. shouldRepaint: Called when a new class instance is given.

	
class ExampleCustomPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {

}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {

}
     }

The paint method has two parameters:
1. canvas
2. Size

The canvas will be the same size as any children given inside the CustomPaint widget. In this instance, the canvas area will occupy the entire Container.

The Canvas Area

To draw anything on the canvas, you must be aware of the coordinate system it uses. The Canvas class exposes drawing commands for several operations, including:

• points, lines, arcs/ellipses, and polygonal shapes
• paths
• text
• shadows
• clipping

Most operations have the form to draw the object and may require an Offset, individual doubles, and Paint. One thing to be aware of when using graphics software in a different language is that the meaning of Offset varies depending on the context. Depending on the situation, it can represent a position or a delta from another coordinate.

From the Flutter docs,
Offsets can often be understood in one of two ways:

1. As indicating a location in Cartesian space at a predetermined separation from an independently maintained origin. For instance, the top-left position of a child is frequently specified as an Offset from the top-left of the parent box in the RenderBox protocol.

2. In the form of a vector that can be used with coordinates. As an example, while painting a RenderObject, the parent is given an Offset from the origin of the screen, which it can add to the Offsets of its children to determine the Offset from the origin of the screen to each of the children.

Colouring the canvas

We can utilize the canvas to cover every layer with a specific colour.function drawColor()which colours the entire canvas with colour.

	
void paint(Canvas canvas, Size size)
{
canvas.drawColor(Colors.black, BlendMode.color);
}

The BlendMode specifies how colour is painted over already-existing canvas elements.

Common classes used in painting

1. Rect

A Rect class creates a virtual rectangle with a width and height, which will draw an actual rectangle or set bounds for a shape internally. A Rect can be made in several ways, such as:

	
Rect.fromCenter( center: Offset(100, 100), width: 50, height: 80, );

2. Path

There are functions in the Custom Painter that supports drawing common shapes, such as circles and rectangles. However, paths enable us to trace out a specific shape when we need to draw custom shapes.

	
Path() ..moveTo(0, 0) ..lineTo(100, 100) ..lineTo(0, 100) ..lineTo(0, 0);

Drawing a Circle

You can draw a circle by calling the method known as drawCircle() on the canvas object:

	
class DrawCircle extends CustomPainter {
var paint1 = Paint()..color = Colors.redAccent;
var paint2 = Paint()..color = Colors.amber[100];
// ..strokeWidth = 16
// ..style = PaintingStyle.stroke;
@override
void paint(Canvas canvas, Size size) {
canvas.drawCircle(Offset(0.0, 0.0), 50, paint1);
canvas.drawCircle(Offset(0.0, 0.0), 40, paint2);
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return false;
}
}

Output

Drawing an Arc

The enclosing Rect must first be defined before an arc may be defined. The beginning angle from which the arc originates must then be determined. All angles are in radians, not degrees, and the sweep angle determines the angle the arc subtends. If the arc returns to the centre determined by the theme Center argument. If accurate, the sector is traced out as a circle rather than an arc. The arc can then be painted using the drawArc() method by adding up all of these factors:

	
@override
void paint(Canvas canvas, Size size) {
var center = const Offset(200.0, 200.0);
var rectangle = Rect.fromCenter(center: center, width: 100.0, height: 50.0);
var paint = Paint()
..color = Colors.blue;
canvas.drawArc(rectangle, 0.0, pi / 2, true, paint);
}

Output

This depicts an arc that extends to the right by 90 degrees (pi / 2 radians) and then returns to the centre.

Drawing Ovals

Since they can be drawn in various sizes and shapes, ovals are more difficult to draw than circles. The oval’s bounds can be set using the same Rectclass as before, and it can be painted on the screen using the drawOval() method:

	
@override
void paint(Canvas canvas, Size size) {
var center = Offset(size.width/2, size.height/2);
var rectangle = Rect.fromCenter(center: center, width: 300.0, height: 150.0);
var paint = Paint()..color = Colors.blue..style = PaintingStyle.fill;
canvas.drawOval(rectangle, paint);
}

Output

Drawing Image

There are numerous techniques to draw pictures on a canvas. One option is to utilize the image’s default size and specify an Offset for the top left corner using the drawImage() method:

	
class DemoPainter extends CustomPainter {
 final ui.Image image;
 DemoPainter(this.image);
 @override
 void paint(Canvas canvas, Size size) {
   var srcCenter = const Offset(150.0, 150.0);
   var dstCenter = const Offset(150.0, 200.0);
   var paint = Paint();
   var source = Rect.fromCenter(center: srcCenter, width: 100.0, height: 50.0);
   var destination =
       Rect.fromCenter(center: dstCenter, width: 150.0, height: 150.0);
   canvas.drawImageRect(image, source, destination, paint);
 }

 @override
 bool shouldRepaint(covariant CustomPainter oldDelegate) {
   return false;
 }
}

Output

Conclusion

In conclusion, CustomPaint is a powerful and flexible widget in Flutter that allows developers to create custom app graphics and visualizations. It enables experts to easily draw their shapes, paths, and patterns and control their appearance and behaviour. With CustomPaint, you can implement complex animations and transitions and even create interactive and responsive user interfaces. So that, Developers can paint their designs using low-level graphics primitives, giving them complete control over the look and feel of their app. Hence, the flexibility and creativity that CustomPaint offers make it an excellent tool for building unique and engaging user interfaces in the Flutter app.

Suppose, you want to develop a Flutter app and include these new features and functionalities. We’re eager to use these new functionalities to provide our clients with high-quality apps. As a result, our team of skilled Flutter developers can assist companies and organizations in utilizing these advanced features to produce top-notch, latest mobile apps that satisfy their particular objectives and demands.

Frequently Asked Questions (FAQs)

1. Which tool is utilized to make custom shape?

For constructing custom shapes that are accessed from custom shapes’ same properties as Shape tools are the Pen Tool.

2. What is the use of the paint () method?

When the AWT method is invoked, the Graphics object parameter is pre-configured with a perfect state for drawing on this specific component. However, the colour of graphics objects is set to a component’s foreground property. As a result, a component’s property is used to set the graphics object’s font.

3. How to use CustomPaint in Flutter?

A widget that gives a canvas on which you can draw the images during the painting phase. But in Flutter, you can use the CustomPaint widget, which uses the parent component’s size rather than the child component’s. Paint() and shouldRepaint() are two methods that the CustomPainter subclass overrides.

Book your appointment now