One of the main reasons Flutter is a step ahead of its competition is its ability to control each pixel. A developer has full access to each pixel, allowing them to create desired smooth user interface along with fluent animation. This has been one of the key points of Flutter compared to other cross-platform technology.
In native Android and iOS development, working on custom designs may be very hard and time-consuming. Forget about these troubling times, as Flutter's custom Paint Widget and Hot Reload feature make it easy and quick to make changes to the project. Many developers prefer Flutter over native as they can develop complex to simple custom designs per their needs.
Basics of Custom Paint
To use a custom painter, we must first implement
Custom Paint widget and pass the
Custom Paint class to the painter parameter.
Custom paint normally takes two parameters: a painter and a child. A simple demo is given below on how to use the custom painter in the code snippet.
We must initialize our custom painter class as shown below in the code snippet. We create a
MyPainter class that extends
CustomPainter class, which is an abstract class. This class must be implemented with two methods: -
Paint is the first method to override, which helps to paint the UI (User Interface) whenever the method is called.
When a new instance of the class is given, the
shouldRepaint function is invoked to determine whether the new instance truly represents new information.
Drawing Basic Shapes
Custom painter is a very powerful tool that can be used to create extremely complex UI and animations. However, we will create some basic shapes using a custom painter to make them simple. We will create a straight line, rectangle, circle and stroke property.
i. Drawing a Straight Line
The snippet given below creates a straight green line. We define our shapes to be drawn inside the
paint method along with other properties like
color. The first offset creates a point at the x-axis of the device screen, and the second offset creates a line from the first offset till the end of the centre screen width y-axis.
ii. Drawing a Rectangle
The snippet below creates a rectangular box. The paint method has a
drawRect method which is accessible using the
canvas class. This method takes four points to draw a rectangle on the screen easily. We can give styling, stroke width, and colour fill per our requirements.
iii. Drawing a Circle
Just like a rectangle, we can easily create a circle using paint. In the paint method, using canvas, we get access to the
drawCircle method to create a circle easily.
drawCircle takes offset, radius and paint as a parameter.
Application of Custom Painter
i. Drawing Complex Shapes
There comes a situation when a developer needs to create complex UI as per the designs, and Flutter's default widget might not be sufficient to create the required UI design. For creating complex shapes with curves and lines, we need custom paint to create multiple points and curves per the design requirement.
ii. Drawing Text
The text widget in Flutter uses paint to draw text by default. We can overcome that and use text painter in custom paint to draw text from scratch using paint. There is no such vast difference between text widget and text painter, but by using text painter, we have access to the text's actual height and width in pixels. Properties like
textAlign are also available for flexibility.
iii. Drawing Images
There may be situations where image processing is involved in projects, and complex tasks must be performed. Using custom paint to paint images on canvas and performing further operations helps to reduce memory pressure and improve performance. We can edit images, add filters, and add text or borders to the image.
iv. Creating Complex Animations
We sometimes need to create complex and pixel-perfect animation in the app, which can be achieved using custom paint. Creating an attractive app requires animations that are jank-free and smooth. We must work with custom paint to maintain better fps and jank-free animation.
Custom paint is of great help to Flutter developers as it is very powerful and versatile, using which developers can perform complex tasks. As you read in this article, custom paint is easy and helps to optimize application performance. There is more to this topic. Go ahead and explore more and create beautiful things with paint in Flutter.
Thank you for reading. Subscribe and share it with your friends if you found this article helpful.