flutter draw circle example
In this post, you will acquire how to draw circle using CustomPaint in Flutter.

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

[sociallocker id="2232″]draw circumvolve source code[/sociallocker]

What is CustomPaint Widget?

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

  • The CustomPainter form gives two methods, paint() and shouldRepaint().
  • When CustomPainter needs to paint, paint() method gets called. Within pigment() method we will implement code to describe circle.
  • Sheet provides lots of draw methods similar drawLine(), drawOval, drawRect, drawArc() and drawCircle. In that location's more you can cheque out the documentation.
            void drawCircle( Outset c, double radius, Paint pigment )
  • Showtime: Where to draw circle center point in the canvas.
  • radius: Radius of the circle.
  • Paint: styling attributes for the circle.

Basics is prepare now. So let's outset drawing…

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

Depict Circumvolve Using CustomPaint – Unproblematic 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 go called.
  • Using Paint object, made circle color ruby.
  • Radius of circle is fifty.
  • Middle of the circle is Outset(0.0, 0.0)
            import 'package:flutter/fabric.dart';  void main() {   runApp(MyApp()); }  course MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     render MaterialApp(       title: 'Flutter Draw Circle',       theme: ThemeData(         primarySwatch: Colors.blueish,       ),       home: Scaffold(         appBar: AppBar(           championship: Text('Draw Circle Using CustomPaint'),         ),         torso: Center(           child: CustomPaint(             painter: DrawCircle(),           ),         ),       ),     );   } }  form DrawCircle extends CustomPainter {   @override   void paint(Canvass sheet, Size size) {     var paint = Paint();     pigment.color = Colors.red;      canvas.drawCircle(Offset(0.0, 0.0), l, paint);   }    @override   bool shouldRepaint(covariant CustomPainter oldDelegate)  {//faux : paint call might be optimized away.     return simulated;   } }
  • How To Remove Debug Banner In Palpitate?

Depict Circle inside another Circle Example

draw circle inside another circle flutter

  • Hither You will create two Paint objects. One for Reddish circle and other for yellow circle.
  • Simply similar the showtime case, Provided CustomPainter subclass as Scaffold'due south body value.
  • Both circle has same center point, different radius will prove one circle is inside another circle.
            import 'packet:flutter/material.dart';  void chief() {   runApp(MyApp()); }  form MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     render MaterialApp(       title: 'Flutter Draw Circle - Second Example',       theme: ThemeData(         primarySwatch: Colors.blue,       ),       home: Scaffold(         appBar: AppBar(           title: Text('Depict Circle Inside Another Circle In Flutter'),         ),         body: Middle(           child: CustomPaint(             painter: DrawCircle(),           ),         ),       ),     );   } }  form DrawCircle extends CustomPainter {   var paint1 = Paint()..colour = Colors.redAccent;   var paint2 = Pigment()..color = Colors.amber[100];   // ..strokeWidth = 16   // ..style = PaintingStyle.stroke;    @override   void paint(Canvas canvas, Size size) {     canvass.drawCircle(Kickoff(0.0, 0.0), 50, paint1);     sail.drawCircle(Get-go(0.0, 0.0), xl, paint2);   }    @override   bool shouldRepaint(covariant CustomPainter oldDelegate) {     return false;   } }

Permit's change the lawmaking and brand it look like below.
circle inside another circle stroke flutter

  • Add some strokewidth and mode using Paint.
            var paint2 = Paint()     ..color = Colors.amber[100]     ..strokeWidth = sixteen     ..style = PaintingStyle.stroke;

Run now.

  • Genymotion Emulator With Playstore Back up

3. Gradient Circumvolve Using CustomPaint

gradient circle in flutter

  • Paint class helps to brand slope. Only provide it's object while cartoon circumvolve.
  • This example uses LinearGradient. 
            import 'parcel:flutter/textile.dart';  void main() {   runApp(MyApp()); }  form MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     render MaterialApp(       title: 'Flutter Slope Circle Demo',       theme: ThemeData(         primarySwatch: Colors.blue,       ),       home: Scaffold(         appBar: AppBar(           title: Text('Draw Slope Circle'),         ),         body: Center(           kid: CustomPaint(             painter: DrawCircle(),           ),         ),       ),     );   } }  course DrawCircle extends CustomPainter {   @override   void paint(Canvas sail, Size size)    {     final paint = Pigment()       ..shader = LinearGradient(colors: [         Colors.blue,         Colors.blueGrey,       ]).createShader(Rect.fromCircle(heart: Offset(0.0, 0.0), radius: fifty));      canvas.drawCircle(Offset(0.0, 0.0), 50, paint);    }    @override   bool shouldRepaint(covariant CustomPainter oldDelegate) {     return fake;   } }

Thanks for scrolling. If you similar this post, delight share information technology with your family and friends.

CustomPaint Flutter Docs