小编Pre*_*rtz的帖子

我有一个播放按钮，可以播放用户录制的消息。一旦用户点击播放按钮，它就会变成一个停止按钮，显示一个圆形进度指示器，该指示器根据记录的消息总时间和当前曲目时间的百分比进行进度。

我已经做了一些工作，但还不够精确，具体取决于轨道的长度（4秒与6.5秒），在循环进度指示器完成后，轨道将运行更长的时间，或者轨道将在进度指示器之前结束已经完成了。

我也希望进展顺利，而不是间歇性跳跃。

下面是停止按钮的代码，它采用double totalTime轨道播放的总时间，然后启动计时器和动画控制器。

而且完全透明，自定义画家是我在网上找到的，但不完全理解它是如何工作的，所以即使那里没有问题，如果有人可以打破它，我将非常感激：D

import 'dart:async';
import 'dart:math';
import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_icons/flutter_icons.dart';

class StopButton extends StatefulWidget {
  @override
  _StopButtonState createState() => _StopButtonState();

  final double totalTime;
  final dynamic onClickFunction;
  StopButton(this.totalTime, this.onClickFunction);
}

class _StopButtonState extends State<StopButton> with TickerProviderStateMixin {
  double percentage = 0.0;
  double newPercentage = 0.0;
  AnimationController percentageAnimationController;
  Timer timer;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    setState(() {
      percentage = 0.0;
    });
    percentageAnimationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 1000)) …