flutter 中的自定义计时器小部件，边框颜色渐变，计时器位于圆心

Question

我想在 flutter 中创建一个自定义计时器小部件。计时器应位于圆的中心，并且圆的边界应随着计时器的减少而减小。它们应该是边界形状末端正在缩小的圆形点。我想对圆的边框应用渐变颜色。

我尝试使用颤动的圆形进度指示器，但我无法将边框的颜色更改为渐变，并且无法将点放在圆圈的缩小边缘。

Answer 1

您似乎正在 Flutter 中寻找一个自定义计时器小部件，使用percent_indicator 包，其边框为渐变颜色，计时器位于圆的中心。这是所提供示例的格式化且略有改进的版本：

CircularPercentIndicator(
  radius: screenWidth / 4,
  lineWidth: 5.0,
  percent: 0.75,
  center: Text(
    "75%",
    style: TextStyle(color: Color(0xFF535355)),
  ),
  linearGradient: LinearGradient(
    begin: Alignment.topRight,
    end: Alignment.bottomLeft,
    colors: <Color>[Color(0xFF1AB600), Color(0xFF6DD400)],
  ),
  rotateLinearGradient: true,
  circularStrokeCap: CircularStrokeCap.round,
)

将计时器文本添加到文本小部件中，并将百分比字段添加到小部件中。