You might have seen a lot of apps having highly customized designs and amazing animations. It is really time-consuming and painful to achieve that level of customization on a native Android and iOS apps.
Flutter has got your back. With the help of CustomPainter
combined with the legendary Hot Reload feature of Flutter you can iterate upon your creations efficiently and fast.
In this series, I will start with the basics of painting using CustomPainter
(drawing basic shapes) in the first few parts, and then I will go into the complex designs.
NOTE: The series will involve some basic concepts of mathematics (mainly Trigonometry and Coordinate Geometry).
So, let's get started.
Initial App Structure
The basic structure of the app will just consist of a Scaffold
having an AppBar
, and a CustomPaint
widget in the body.
class MyPainter extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Custom Painter'),
),
body: CustomPaint(
painter: ShapePainter(),
child: Container(),
),
);
}
}
CustomPaint Widget Properties
Some of the most important properties of the CustomPaint
widget are:
- painter: The painter that paints before the child.
- foregroundPainter: The painter that paints after the child.
- child: The canvas will by default take the size of the child, if it is defined.
- size: If the child is not defined, then the size of the canvas should be specified.
For getting started with the basic shapes, you will just need two of these properties:
- painter
- child
In the previous code snippet, I have defined a Container
as the child. As you might know, Container
by default takes up the entire size of the screen when there is no child specified within it.
Intro to CustomPainter
Now, you have to define the ShapePainter widget which should extend the CustomPainter class.
- paint: This method is called whenever the object needs to be repainted.
- shouldRepaint: This method is called when a new instance of the class is provided.
class ShapePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
// TODO: implement paint
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return null;
}
}
Deep dive into paint method
The paint
method has two parameters:
- canvas
- size
If we have a child specified inside the CustomPaint widget, then the canvas will have the same size as that. In our case, the canvas area will take the size of the entire Container.
The Canvas Area uses a coordinate system in order to located positions and they can be connected in various fashion in order to generate different custom shapes.
By default, the origin (0, 0) is located at the top-left corner of the canvas, and with respect to it all the drawings are done as the painter starts from the origin.
Conclusion
I believe you have enjoyed this first part of the series which should have given you a good insight into the small concepts of CustomPainter
and the Canvas.
From the next article onwards, we will start painting on this canvas. And trust me you will love Flutter for this.
I also write articles on Medium and Codemagic Blog. You can follow me on Twitter and find some of my projects on GitHub. Also, donβt forget to check out my website.
Thank you for reading!
Top comments (0)