How to Draw Circle On Canvas in Flutter?

Flutter – Draw Circle On Canvas

In this tutorial, we shall learn how to draw a circle on a Canvas in Flutter.

We shall use CustomPaint widget. CustomPaint widget has a property called painter. This painter can be assigned with a class object that extends CustomPainter.

When we extend CustomPainter class, we get access to canvas by overriding paint() method. Inside the paint() method, using canvas, we can draw a circle to the canvas.

To draw circle on canvas, use drawCircle() method of Canvas class. Following is the syntax of drawCircle() method.

void drawCircle (
  Offset c,
  double radius,
  Paint paint


In the following example, we draw a circle on the canvas by following these steps.

  1. Create a class OpenPainter which extends CustomPainter.
  2. Override paint() method and shouldRepaint() method as shown below.
  3. In the paint method, using canvas object, make a call to drawCircle() method.
  4. Include CustomPaint widget in your UI. For the painter property, assign OpenPainter().
  5. When the UI is rendered, OpenPainter() object is used to paint the widget.


import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() {

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
      debugShowCheckedModeBanner: false,

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Tutorial -'),
        backgroundColor: Color(0xFF444444),
      body: ListView(children: <Widget>[
          style: TextStyle(fontSize: 20, height: 2),
          width: 400,
          height: 400,
          child: CustomPaint(
            painter: OpenPainter(),

class OpenPainter extends CustomPainter {
  void paint(Canvas canvas, Size size) {
    var paint1 = Paint()
      ..color = Color(0xff63aa65) = PaintingStyle.fill;
    //a circle
    canvas.drawCircle(Offset(200, 200), 100, paint1);

  bool shouldRepaint(CustomPainter oldDelegate) => true;

In the Code

Let us understand what arguments we gave to drawCircle() method.

canvas.drawCircle(Offset(200, 200), 100, paint1);

First Argument: We have given an offset of (200, 200). The top left coordinates of the square surrounding the circle is (200, 200). The top left corner of the canvas have an offset of (0, 0).

Second Argument: The circle shall have a radius of 100.

Third Argument: The circle is rendered onto the canvas using the paint defined by the this object. You may change the color of circle, fill property of the circle, etc., using this paint object.

Output Screenshot

Flutter - Draw Circle On Canvas


In this Flutter Tutorial, we learned how to draw a circle to Canvas using CustomPaint widget and CustomPainter class.

Desclaimer: We are not affiliated, associated, authorized, endorsed by, or in any way officially connected with the Google, Apple or Flutter, or any of its subsidiaries or its affiliates. The names Google, Apple and Flutter as well as related names, marks, emblems and images are registered trademarks of their respective owners. This site covers tutorials related to Flutter developed by Google.