Flutter drawArc with no center point

Question

In the flutter documentation its states,

If useCenter is true, the arc is closed back to the center, forming a circle sector. Otherwise, the arc is not closed, forming a circle segment.

I don't want to use either of those, I just want to draw the outside perimeter of the curve (Path). To explain it better, what I'm trying to achieve is as per the image on the right.

I know I can do a fill, but I want a transparent center. Is there another technique that I can use?

Answer 1

Use Path.arcTo or, more simply, Canvas.arcTo with a stroke style Paint

import 'dart:math';

import 'package:flutter/material.dart';

class _ArcPainter extends CustomPainter {
  _ArcPainter();

  @override
  bool shouldRepaint(_ArcPainter oldDelegate) {
    return true;
  }

  @override
  void paint(Canvas canvas, Size size) {
    Rect rect = Rect.fromLTWH(0.0, 0.0, size.width, size.height);

    Path path = Path()..arcTo(rect, 0.0, -pi / 2, true);
    canvas.drawPath(
        path,
        Paint()
          ..color = Colors.orange
          ..strokeWidth = 3.0
          ..style = PaintingStyle.stroke);

    canvas.drawArc(
        rect,
        0.0,
        pi / 2,
        false,
        Paint()
          ..color = Colors.teal
          ..strokeWidth = 3.0
          ..style = PaintingStyle.stroke);
  }
}

class ArcWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new SizedBox(
      width: 250.0,
      height: 250.0,
      child: new CustomPaint(
        painter: new _ArcPainter(),
      ),
    );
  }
}

class SegmentDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: const Text('Arcs etc')),
      body: ArcWidget(),
    );
  }
}

void main() {
  runApp(
    MaterialApp(
      home: SegmentDemo(),
    ),
  );
}