FL_Charts小屏幕底部标题重叠，添加横向滚动报错如何解决？

核心问题分析 #

你遇到的“Unsupported operation: Infinity or NaN toInt”错误，本质是FL_Charts在无宽度约束的横向滚动容器中，SideTitles组件计算布局时拿到了无限大的宽度值，导致整数转换失败。小屏幕标题重叠则是因为默认布局下底部标题空间不足，且无横向滚动能力。

解决方案步骤 #

1. 给图表设置明确宽度约束 #

直接把图表放在SingleChildScrollView里会导致图表宽度无限，必须用SizedBox或Container给图表指定明确宽度（可根据数据量动态计算）：

SingleChildScrollView(
  scrollDirection: Axis.horizontal,
  child: SizedBox(
    // 按每个数据点分配60px宽度，可根据需求调整
    width: yourDataList.length * 60.0,
    height: 300, // 固定图表高度
    child: LineChart( // 或BarChart等你使用的图表类型
      // 图表配置
    ),
  ),
)

2. 优化底部标题布局 #

结合滚动能力，进一步调整bottomTitles配置避免重叠：

titlesData: FlTitlesData(
  bottomTitles: AxisTitles(
    sideTitles: SideTitles(
      showTitles: true,
      reservedSize: 35, // 增加底部预留空间，防止标题被截断
      interval: 1, // 数据量过大时可设为2/3，跳过部分标题
      getTitlesWidget: (value, meta) {
        return SideTitleWidget(
          axisSide: meta.axisSide,
          child: Text(
            yourDataList[value.toInt()].label,
            style: TextStyle(fontSize: 10), // 缩小字体适配小屏幕
            overflow: TextOverflow.ellipsis, // 超长标题显示省略号
          ),
        );
      },
    ),
  ),
  // 隐藏不需要的坐标轴标题
  leftTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
  topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
  rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
)

3. 排查数据有效性 #

确保你的图表数据中没有NaN或无限大数值，这类数据会导致坐标轴计算异常，触发同样的错误。可以在构建数据前做校验：

// 示例：过滤无效数据
final validData = yourDataList.where((item) => !item.value.isNaN && item.value.isFinite).toList();

完整示例代码 #

import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';

class ScrollableChart extends StatelessWidget {
  final List<ChartData> yourDataList;

  const ScrollableChart({super.key, required this.yourDataList});

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: SizedBox(
        width: yourDataList.length * 60.0,
        height: 300,
        child: LineChart(
          LineChartData(
            gridData: FlGridData(show: false),
            borderData: FlBorderData(show: true),
            titlesData: FlTitlesData(
              bottomTitles: AxisTitles(
                sideTitles: SideTitles(
                  showTitles: true,
                  reservedSize: 35,
                  interval: 1,
                  getTitlesWidget: (value, meta) {
                    return SideTitleWidget(
                      axisSide: meta.axisSide,
                      child: Text(
                        yourDataList[value.toInt()].label,
                        style: TextStyle(fontSize: 10),
                        overflow: TextOverflow.ellipsis,
                      ),
                    );
                  },
                ),
              ),
              leftTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
              topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
              rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
            ),
            lineBarsData: [
              LineChartBarData(
                spots: yourDataList.map((e) => FlSpot(e.index.toDouble(), e.value)).toList(),
                isCurved: true,
                barWidth: 2,
                color: Colors.blue,
                dotData: FlDotData(show: true),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 示例数据模型
class ChartData {
  final int index;
  final String label;
  final double value;

  ChartData({required this.index, required this.label, required this.value});
}

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