3 Examples: Draw Circle In Flutter Using CustomPaint

In this post, you will learn how to draw circle using CustomPaint in Flutter.

Before drawing Circle, you must know about CustomPaint widget. Because below examples uses CustomPaint.

What is CustomPaint Widget?

CustomPaint widget gives canvas to draw. For drawing circle, we will use that canvas. This widget provides a property called painter, we need to assign a subclass of CustomPainter.

• The CustomPainter class gives two methods, paint() and shouldRepaint().
• When CustomPainter needs to paint, paint() method gets called. Inside paint() method we will implement code to draw circle.
• Canvas provides lots of draw methods like drawLine(), drawOval, drawRect, drawArc() and drawCircle. There’s more you can check out the documentation.

void drawCircle(
Offset c,
double radius,
Paint paint
)

• Offset: Where to draw circle center point in the canvas.
• radius: Radius of the circle.
• Paint: styling attributes for the circle.

Basics is ready now. So let’s start drawing…

• Setup Flutter and Create First Project
• 7 Flutter Commands You Must Know
• Flutter CircleAvatar Widget Tutorial

Draw Circle Using CustomPaint – Simple Example

• Scaffold body takes CustomPaint as it’s child with CustomPainter’s subclass.
• When Flutter started to paint, CustomPainter’s paint() method get called.
• Using Paint object, made circle color red.
• Radius of circle is 50.
• Center of the circle is Offset(0.0, 0.0)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Draw Circle',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Draw Circle Using CustomPaint'),
        ),
        body: Center(
          child: CustomPaint(
            painter: DrawCircle(),
          ),
        ),
      ),
    );
  }
}

class DrawCircle extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint();
    paint.color = Colors.red;

    canvas.drawCircle(Offset(0.0, 0.0), 50, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) 
{//false : paint call might be optimized away.
    return false;
  }
}

• How To Remove Debug Banner In Flutter?

Draw Circle inside another Circle Example

• Here You will create two Paint objects. One for Red circle and other for yellow circle.
• Just like the first example, Provided CustomPainter subclass as Scaffold’s body value.
• Both circle has same center point, different radius will show one circle is inside another circle.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Draw Circle - Second Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Draw Circle Inside Another Circle In Flutter'),
        ),
        body: Center(
          child: CustomPaint(
            painter: DrawCircle(),
          ),
        ),
      ),
    );
  }
}

class DrawCircle extends CustomPainter {
  var paint1 = Paint()..color = Colors.redAccent;
  var paint2 = Paint()..color = Colors.amber[100];
  // ..strokeWidth = 16
  // ..style = PaintingStyle.stroke;

  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawCircle(Offset(0.0, 0.0), 50, paint1);
    canvas.drawCircle(Offset(0.0, 0.0), 40, paint2);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

Let’s change the code and make it look like below.

• Add some strokewidth and style using Paint.

 var paint2 = Paint()
    ..color = Colors.amber[100]
    ..strokeWidth = 16
    ..style = PaintingStyle.stroke;

Run now.

• Genymotion Emulator With Playstore Support

3. Gradient Circle Using CustomPaint

• Paint class helps to make gradient. Just provide it’s object while drawing circle.
• This example uses LinearGradient.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Gradient Circle Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Draw Gradient Circle'),
        ),
        body: Center(
          child: CustomPaint(
            painter: DrawCircle(),
          ),
        ),
      ),
    );
  }
}

class DrawCircle extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) 
  {
    final paint = Paint()
      ..shader = LinearGradient(colors: [
        Colors.blue,
        Colors.blueGrey,
      ]).createShader(Rect.fromCircle(center: Offset(0.0, 0.0), radius: 50));

    canvas.drawCircle(Offset(0.0, 0.0), 50, paint);

  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

Thank you for scrolling. If you like this post, please share it with your family and friends.

CustomPaint Flutter Docs