How to Draw Arc on Canvas in Flutter?

Flutter – Draw Arc On Canvas

In this tutorial, we shall learn how to draw a list of points 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 list of points to the canvas.

Each point is an offset. For example Offset(80, 50).

To draw list of points on canvas, use drawPoints() method of Canvas class. Following is the syntax of drawPoints().

void drawPoints (
  PointMode pointMode,
  List<Offset> points,
  Paint paint
)

Example

In the following example, we draw points 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 drawPoints() method. Detailed description about the arguments is given after the code.
  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.

main.dart

import 'dart:ui';

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Tutorial - googleflutter.com'),
        backgroundColor: Color(0xFF444444),
      ),
      body: ListView(children: <Widget>[
        Text(
          'Canvas',
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 20, height: 2),
        ),
        Container(
          width: 400,
          height: 400,
          child: CustomPaint(
            painter: OpenPainter(),
          ),
        ),
      ]),
    );
  }
}

class OpenPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint1 = Paint()
      ..color = Color(0xff63aa65)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 5;
    //draw arc
    canvas.drawArc(Offset(100, 100) & Size(100, 100),
        0, //radians
        2, //radians
        false,
        paint1);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

In the Code

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

canvas.drawPoints(PointMode.points, points, paint1);

First Argument: PointMode.points draw each point separately. There are other enum values for PointMode which can be used to draw line segments joining the points, or a polygon, etc.

Second Argument: List of Points. Each of these points is drawn separately on the canvas. Each point is an Offset object.

Third Argument: The points are rendered onto the canvas using the paint defined by the this object. You may change the color of points, shape of the points, etc., using this paint object.

Output Screenshot

Using Center to Draw Arc

Set fourth argument to drawArc() to true.

main.dart – Part

import 'dart:ui';

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Tutorial - googleflutter.com'),
        backgroundColor: Color(0xFF444444),
      ),
      body: ListView(children: <Widget>[
        Text(
          'Canvas',
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 20, height: 2),
        ),
        Container(
          width: 400,
          height: 400,
          child: CustomPaint(
            painter: OpenPainter(),
          ),
        ),
      ]),
    );
  }
}

class OpenPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint1 = Paint()
      ..color = Color(0xff63aa65)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 5;
    //draw arc
    canvas.drawArc(Offset(100, 100) & Size(100, 100),
        0, //radians
        2, //radians
        true,
        paint1);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

Output Screenshot

Fill the Arc and Center

Paint.style = PaintingStyle.fill and provide the argument useCenter as true to drawArc().

main.dart

import 'dart:ui';

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Tutorial - googleflutter.com'),
        backgroundColor: Color(0xFF444444),
      ),
      body: ListView(children: <Widget>[
        Text(
          'Canvas',
          textAlign: TextAlign.center,
          style: TextStyle(fontSize: 20, height: 2),
        ),
        Container(
          width: 400,
          height: 400,
          child: CustomPaint(
            painter: OpenPainter(),
          ),
        ),
      ]),
    );
  }
}

class OpenPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint1 = Paint()
      ..color = Color(0xff63aa65)
      ..style = PaintingStyle.fill
      ..strokeWidth = 5;
    //draw arc
    canvas.drawArc(Offset(100, 100) & Size(100, 100),
        0, //radians
        2, //radians
        true,
        paint1);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

Output Screenshot

Summary

In this Flutter Tutorial, we learned how to draw a list of points to Canvas using CustomPaint widget and CustomPainter class. We also learned how to make these points round and nice.

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 googleflutter.com covers tutorials related to Flutter developed by Google.