Флаттер DrawArc без центральной точки

Question

В документации флаттера его состояния,

Если useCenter имеет значение true, дуга закрывается назад к центру, образуя круговой сектор. В противном случае дуга не замкнута, образуя круг сегмент.

Я не хочу использовать ни один из них, я просто хочу нарисовать внешний периметр кривой (Path). Чтобы объяснить это лучше, я пытаюсь добиться этого, как показано на рисунке справа.

Я знаю, что могу сделать заливку, но я хочу прозрачный центр. Есть ли другая техника, которую я могу использовать?

Answer 1

Используйте Path.arcTo или, проще говоря, Canvas.arcTo со стилем stroke 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(),
    ),
  );
}