Flutter：如何让带分数字符串的SimpleCircularProgressBar实现动画

问题出在double.tryParse(awayTeamStatsValue!)——这个方法无法解析"1/2"这类分数格式的字符串，会返回null，最终进度条的value会取默认值0，自然无法展示对应分数的动画效果。

解决方案：需要先把分数字符串解析成对应的数值（比如"1/2"转为50，对应maxValue=100时的50%进度），再传给value参数。具体实现如下：

1. 编写一个分数解析工具函数：

double parseFractionString(String fraction) {
  // 分割分子和分母
  final parts = fraction.split('/');
  if (parts.length != 2) return 0;
  
  final numerator = double.tryParse(parts[0]);
  final denominator = double.tryParse(parts[1]);
  
  // 处理分子/分母解析失败，或者分母为0的异常情况
  if (numerator == null || denominator == null || denominator == 0) return 0;
  
  // 转换为对应maxValue=100的百分比数值
  return (numerator / denominator) * 100;
}

2. 修改进度条的value赋值逻辑：

final String? awayTeamStatsValue = "1/2";
SimpleCircularProgressBar(
  size: 80,
  progressStrokeWidth: 8,
  backStrokeWidth: 8,
  backColor: Colors.black,
  progressColors: [homeTeamColor],
  maxValue: 100,
  // 使用工具函数解析分数字符串
  value: parseFractionString(awayTeamStatsValue!),
  animationDuration: const Duration(milliseconds: 1200),
  onGetText: (double value) {
    return Text(
      awayTeamStatsValue!,
      style: FootballStatsHelper()
          .fAntonS20W400(color: homeTeamColor),
    );
  },
),

说明：

• 工具函数会把分数转换为基于maxValue=100的百分比数值，比如"1/2"转为50，"3/4"转为75，这样进度条就能正确展示对应比例的动画。
• 函数包含了异常处理，遇到无效分数格式（如"abc/def"、"1"）或分母为0的情况，会返回0，避免程序崩溃。

内容的提问来源于stack exchange，提问作者SaDev