flutter - 带圆角的方形进度条

Question

我正在尝试在 dart/flutter 中构建一种圆形方形进度条。 也许有人知道如何使其成为可能？我尝试了所有，绘画，边框等等，但没有成功。

example image - circular squared progress bar

Answer 1

您可以尝试square_percent_indicater包here .

如果您想要更加自定义的小部件，请尝试 CustomPainter:

class _MyBorderPainter extends CustomPainter {
  _MyBorderPainter(
      {required this.progress, required this.borderColor, this.strokeWdth});
  double progress; // desirable value for corners side
  double? strokeWdth;
  Color borderColor;

  @override
  void paint(Canvas canvas, Size size) {
    double x = min(size.height, size.width);
    double x2 = x / 2;
    double x4 = x / 4;

    Paint paintt = new Paint()
      ..color = progress == 0 ? Colors.transparent : borderColor
      ..style = PaintingStyle.stroke
      ..strokeWidth = strokeWdth ?? 4.0;
    // ..strokeCap = StrokeCap.round;

    Path path = Path()
      ..moveTo(x2, x)
      ..lineTo(x4, x)
      ..quadraticBezierTo(0, x, 0, x - x4)
      ..lineTo(0, x4)
      ..quadraticBezierTo(0, 0, x4, 0)
      ..lineTo(x - x4, 0)
      ..quadraticBezierTo(x, 0, x, x4)
      ..lineTo(x, x - x4)
      ..quadraticBezierTo(x, x, x - x4, x)
      ..lineTo(x2, x);

    PathMetric pathMetric = path.computeMetrics().first;

    Path extractPath = pathMetric.extractPath(
        pathMetric.length * (0.5 * (1 - progress)),
        pathMetric.length * (0.5 + 0.5 * progress));
    canvas.drawPath(extractPath, paintt);
  }

  @override
  bool shouldRepaint(covariant _MyBorderPainter oldDelegate) {
    return oldDelegate.progress != progress;
  }
}

class SquareProgressBar extends StatelessWidget {
  const SquareProgressBar(
      {required this.strokeWdth,
      required this.borderColor,
      this.borderBgColor,
      required this.progress,
      this.child,
      Key? key})
      : super(key: key);
  final double strokeWdth;
  final Color borderColor;
  final Color? borderBgColor;
  final double progress;
  final Widget? child;

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
        painter: _MyBorderPainter(
            borderColor: borderBgColor ?? Colors.grey,
            strokeWdth: strokeWdth,
            progress: 1.0),
        child: CustomPaint(
          painter: _MyBorderPainter(
            progress: this.progress,
            borderColor: borderColor,
            strokeWdth: strokeWdth,
          ),
          child: this.child ?? null,
        ));
  }
}

结果是: