flutter draw circle example

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…

Draw Circle Using CustomPaint – Simple Example

draw cirlce in flutter

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


Draw Circle inside another Circle Example

draw circle inside another circle flutter

  • 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.
circle inside another circle stroke flutter

  • Add some strokewidth and style using Paint.

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

Run now.

3. Gradient Circle Using CustomPaint

gradient circle in flutter

  • 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

Please disable your adblocker or whitelist this site!