Flutter中如何用API返回值替代FlSpot中的数值绘制折线图？

要把API返回的字符串类型数据替换FlSpot的固定数值，分两步处理即可，具体实现如下：

1. 字符串转Double类型 #

FlSpot的y轴参数要求是double类型，需要先把sondeger、mindeger、maxdeger这三个String?类型的数据转换成double。为避免空值或非法数字导致报错，建议用double.tryParse配合空值兜底：

// 在build方法或合适位置转换数值
final double sondegerValue = double.tryParse(sondeger ?? '') ?? 0.0;
final double mindegerValue = double.tryParse(mindeger ?? '') ?? 0.0;
final double maxdegerValue = double.tryParse(maxdeger ?? '') ?? 0.0;

• double.tryParse会尝试把字符串转成double，转换失败（比如非数字字符串）会返回null
• ?? 0.0是兜底逻辑，空值或转换失败时默认用0.0，你可以根据需求改成其他合理值（比如显示占位提示）

2. 替换FlSpot的固定数值 #

把转换后的数值替换到原来的spots数组中，对应你原来的x轴位置（0、4、8）：

// 替换后的LineChartData中spots部分
spots: [
  FlSpot(0, sondegerValue),
  FlSpot(4, mindegerValue),
  FlSpot(8, maxdegerValue),
],

完整示例片段 #

结合你的StocksDetailScreen，完整的折线图构建代码如下：

class StocksDetailScreen extends StatelessWidget {
  final String? sondeger;
  final String? mindeger;
  final String? maxdeger;

  const StocksDetailScreen({
    Key? key,
    this.sondeger,
    this.mindeger,
    this.maxdeger,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 转换数值
    final double sondegerValue = double.tryParse(sondeger ?? '') ?? 0.0;
    final double mindegerValue = double.tryParse(mindeger ?? '') ?? 0.0;
    final double maxdegerValue = double.tryParse(maxdeger ?? '') ?? 0.0;

    return Scaffold(
      body: LineChart(
        LineChartData(
          lineBarsData: [
            LineChartBarData(
              spots: [
                FlSpot(0, sondegerValue),
                FlSpot(4, mindegerValue),
                FlSpot(8, maxdegerValue),
              ],
              // 其他折线配置（颜色、宽度等）
            ),
          ],
        ),
      ),
    );
  }
}

内容的提问来源于stack exchange，提问作者Mıktad Tahir Durak