使用自定义笔画帽在颤动中创建自定义圆形进度指示器 [英] Create custom circular progress indicator in flutter with custom stroke cap

问题描述

我需要创建这个百分比指标

I need to create this percent indicator

我怎样才能做到这一点?我已经在 Flutter 中尝试过 percent_indicator 包，但主要问题是我们的strokeCap选项数量有限.我也试过用两个弧来做到这一点，但问题仍然存在.有没有办法创建自定义strokeCap，或者没有canvas.drawArc的另一种方法?

How can i achieve this? I've tried percent_indicator package in Flutter, but the main problem is that we have a limited amount of strokeCap options. I've also tried to do that with two arcs, but the problem remains the same. Is there is a way to create a custom strokeCap, or maybe another way without canvas.drawArc?

推荐答案

您可以使用 CustomPainter 来实现这一点.以下是我的解决方案.

You can achieve this using a CustomPainter. Below is my solution.

注意您可以传入一个动态值来更新进度条的值.我没有这样做，因为一旦渲染正确，实现它应该是微不足道的;).您还可以更新颜色以满足您的需要！

NOTE You can pass in a dynamic value to update the progress bar's value. I have not done that since it should be trivial to implement once the rendering is correct ;). You might also update the colors to fit your need!

import 'package:flutter/material.dart';
import 'package:vector_math/vector_math.dart' as vmath;

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: TestPage(),
    );
  }
}

class TestPage extends StatelessWidget {
  const TestPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 200,
          height: 200,
          child: CustomPaint(
            painter: MyPainter(),
            child: Container(),
          ),
        ),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);

    canvas.drawCircle(
      center,
      85,
      Paint()
        ..style = PaintingStyle.stroke
        ..color = Colors.black12
        ..strokeWidth = 30,
    );
    canvas.saveLayer(
      Rect.fromCenter(center: center, width: 200, height: 200),
      // Paint()..blendMode = BlendMode.dstIn,
      Paint(),
    );
    canvas.drawArc(
      Rect.fromCenter(center: center, width: 170, height: 170),
      vmath.radians(0),
      vmath.radians(200),
      false,
      Paint()
        ..style = PaintingStyle.stroke
        ..strokeCap = StrokeCap.round
        ..color = Colors.green[100]
        ..strokeWidth = 30,
    );

    canvas.drawArc(
      Rect.fromCenter(center: center, width: 155, height: 155),
      vmath.radians(0),
      vmath.radians(360),
      false,
      Paint()
        ..style = PaintingStyle.stroke
        ..strokeCap = StrokeCap.round
        ..color = Colors.green
        ..strokeWidth = 15
        ..blendMode = BlendMode.srcIn,
    );
    canvas.restore();
  }

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

您应该得到如下所示的输出:

You should get an output that looks like the below:

这篇关于使用自定义笔画帽在颤动中创建自定义圆形进度指示器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！