Flutter – Make a Custom Circle using Custom Paint
The CustomPaint widget in Flutter allows you to create custom drawings and graphics by specifying a custom CustomPainter class. In this article, we are going to implement a CustomPaint Widget and draw a circle by creating a custom CustomPainter Class. A sample Image is given below to get an idea about what we are going to do in this article.
Basic Syntax of CustomPaint Widget
CustomPaint(
size: Size, // Specify the size of the custom painting area
painter: CustomPainter, // Provide a CustomPainter class for drawing
foregroundPainter: CustomPainter, // Optional: Overlay painter
isComplex: true, // Optional: Specify whether painting is complex
willChange: false, // Optional: Specify whether painting will change
child: YourChildWidget(), // Optional: Child widget to be placed above the painting
)
Required Tools
To build this app, you need the following items installed on your machine:
- Visual Studio Code / Android Studio
- Android Emulator / iOS Simulator / Physical Device device.
- Flutter Installed
- Flutter plugin for VS Code / Android Studio.
Step By Step Implementation
Step 1: Create a New Project in Android Studio
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Import the Package
First of all import material.dart file.
import 'package:flutter/material.dart';
Step 3: Execute the main Method
Here the execution of our app starts.
Dart
void main() => runApp(MyApp()); |
Step 4: Create MyApp Class
In this class we are going to implement the MaterialApp , here we are also set the Theme of our App.
Dart
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme:ThemeData( // Set the app's primary theme color primarySwatch: Colors.green, ), debugShowCheckedModeBanner: false , home: CustomPaintExample(), ); } } |
Step 5: Create CustomPaintExample Class
In this class we are going to Implement the CustomPaintExample widget that help to create a custom drawing which is defined using the MyPainter class.It will draw a circle like structure.Comments are added for better understanding.
CustomPaint(
size: Size(200, 200), // Specify the size of the custom painting area
painter: MyPainter(), // Use a custom painter to define the drawing
),
Dart
class CustomPaintExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( 'CustomPaint Example' ), ), body: Center( child: CustomPaint( size: Size(200, 200), // Specify the size of the custom painting area painter: MyPainter(), // Use a custom painter to define the drawing ), ), ); } } |
Step 6: Create MyPainter Class
MyPainter is a custom class that extends CustomPainter. Inside its paint method, we use the Canvas object to define custom drawing instructions.It will draw a circle like structure. It also contains a method names as shouldRepaint.The shouldRepaint method of MyPainter returns false to indicate that the painting should not be repainted unless explicitly specified.
Dart
class MyPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { // Create a Paint object to define // the appearance of the shape final Paint paint = Paint() ..color = Colors.green // Set the color to green ..strokeWidth = 4 // Set the stroke width ..style = PaintingStyle.fill; // Set the style to fill // Calculate the center and radius of the circle final center = Offset(size.width / 2, size.height / 2); final radius = size.width / 2; // Draw a circle on the canvas using // the specified Paint object canvas.drawCircle(center, radius, paint); } @override bool shouldRepaint(CustomPainter oldDelegate) { // Return false to indicate that the painting // should not be repainted unless necessary return false ; } } |
Here is the full Code of main.dart file
Dart
import 'package:flutter/material.dart' ; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( theme:ThemeData( // Set the app's primary theme color primarySwatch: Colors.green, ), debugShowCheckedModeBanner: false , home: CustomPaintExample(), ); } } class CustomPaintExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( 'CustomPaint Example' ), ), body: Center( child: CustomPaint( size: Size(200, 200), // Specify the size of the custom painting area painter: MyPainter(), // Use a custom painter to define the drawing ), ), ); } } class MyPainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { // Create a Paint object to define the appearance of the shape final Paint paint = Paint() ..color = Colors.green // Set the color to green ..strokeWidth = 4 // Set the stroke width ..style = PaintingStyle.fill; // Set the style to fill // Calculate the center and radius of the circle final center = Offset(size.width / 2, size.height / 2); final radius = size.width / 2; // Draw a circle on the canvas using // the specified Paint object canvas.drawCircle(center, radius, paint); } @override bool shouldRepaint(CustomPainter oldDelegate) { // Return false to indicate that the painting // should not be repainted unless necessary return false ; } } |
Contact Us