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;
  }
}

Output: