Flutter drawArc() method draws full circle not just arc

Question

Using the latest flutter I would like to draw an arch from 0 to 10 using the Canvas.drawArc method. Here's what my code looks like:

@override
void paint(Canvas canvas, Size size) {
    final double radius = 1000.0;
    final Paint paint = new Paint()
      ..isAntiAlias = true
      ..strokeWidth = 1.0
      ..color = Colors.blue[500]
      ..style = PaintingStyle.stroke;
    canvas.drawArc(new Rect.fromLTWH(0.0, 0.0, size.width/2, size.height/2),
    10.0, 20.0, false, paint);
}

It's being drawn inside of a CustomPainter, and is called in the layout like this:

children: <Widget>[
        new CustomPaint(
          painter: new CircleGraphWidget(),
          child: new Center(
            child: new Text(
              'Here\'s text',
              style: const TextStyle(
                fontSize: 40.0,
                fontWeight: FontWeight.w900,
                color: const Color(0xFFFFFFFFF),
              ),
            ),
          ),
        )
      ],

I expect the drawArc call to draw an arc within the rect from 10 to 20 on the circle, however this is what I get:

I'm wondering what it takes to draw just a fraction of the oval instead of the whole thing. For instance, if I only wanted 1/4 of the circle drawn, how would I go about it?

Answer 1

How to draw arcs

To paint in Flutter you use the CustomPaint widget. The CustomPaint widget takes a CustomPainter object as a parameter. In that class you have to override the paint method, which gives you a canvas that you can paint on. Here is the code to draw the arc in the image above.

// Don't forget: import 'dart:math' as math;

@override
void paint(Canvas canvas, Size size) {
  final rect = Rect.fromLTRB(50, 100, 250, 200);
  final startAngle = -math.pi / 2;
  final sweepAngle = math.pi;
  final useCenter = false;
  final paint = Paint()
    ..color = Colors.black
    ..style = PaintingStyle.stroke
    ..strokeWidth = 4;
  canvas.drawArc(rect, startAngle, sweepAngle, useCenter, paint);
}

Notes:

• The rect is what the full oval would be inscribed within.
• The startAngle is the location on the oval that the line starts drawing from. An angle of 0 is at the right side. Angles are in radians, not degrees. The top is at 3π/2 (or -π/2), the left at π, and the bottom at π/2.
• The sweepAngle is how much of the oval is included in the arc. Again, angles are in radians. A value of 2π would draw the entire oval.
• If you set useCenter to true, then there will be a straight line from both sides of the arc to the center.

Context

Here is the main.dart code so that you can see it in context.

import 'dart:math' as math;
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: HomeWidget(),
      ),
    );
  }
}

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomPaint( //                       <-- CustomPaint widget
        size: Size(300, 300),
        painter: MyPainter(),
      ),
    );
  }
}

class MyPainter extends CustomPainter { //         <-- CustomPainter class
  @override
  void paint(Canvas canvas, Size size) {
    //                                             <-- Insert your painting code here.
  }

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

See also

See this article for my fuller answer.

Answer 2

https://docs.flutter.io/flutter/dart-ui/Canvas/drawArc.html

It starts from startAngle radians around the oval up to startAngle + sweepAngle radians around the oval, with zero radians

It expects Radians instead of Degrees:

canvas.drawArc(new Rect.fromLTWH(0.0, 0.0, size.width/2, size.height/2),
0.175, 0.349, false, paint);