Flutter Web中Card组件内使用PieChart报Unsupported operation: NaN错误的原因及解决方案咨询

问题根源 #

这是Flutter Beta渠道1.25.x版本中HTML渲染器的一个已知兼容性bug。当Card作为PieChart的父组件时，布局计算流程中某个环节出现了数值NaN的异常，导致底层Canvas处理时触发Unsupported operation: NaN错误。

而VSCode调试器启动时不会触发，是因为调试环境下的布局时序、计算精度被调整，刚好避开了这个触发条件；Dev渠道1.26.x版本已经修复了这个布局计算的bug，所以能正常运行。

可行修复方案（无需切换渲染器或渠道） #

既然你必须使用Beta渠道且保留HTML渲染器，试试以下几种绕开方案：

• 给PieChart添加明确的尺寸约束
  Card的布局约束没有被正确传递给PieChart，导致尺寸计算出现NaN。给PieChart套一个带固定尺寸的Container或SizedBox，强制约束其布局范围：

  Card(
    child: Container(
      width: 320,
      height: 320,
      padding: EdgeInsets.all(16), // 可选，调整内边距优化显示
      child: PieChart(
        PieChartData(
          sections: [
            PieChartSectionData(value: 4.0, title: 'Section 1', color: Colors.blue),
            PieChartSectionData(value: 6.0, title: 'Section 2', color: Colors.red),
          ],
        ),
      ),
    ),
  )
  

• 使用LayoutBuilder动态获取约束
  如果不想写死尺寸，可以用LayoutBuilder获取Card的可用空间，再动态约束PieChart的尺寸：

  Card(
    child: LayoutBuilder(
      builder: (context, constraints) {
        return SizedBox(
          width: constraints.maxWidth,
          height: constraints.maxWidth, // 保持正方形比例适配饼图
          child: PieChart(...),
        );
      },
    ),
  )
  

• 用Container模拟Card样式（临时替代）
  如果不需要Card的特殊内置交互逻辑，可以用Container模拟Card的视觉效果，这样既保留UI样式又避开bug：

  Container(
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(4),
      boxShadow: [
        BoxShadow(color: Colors.grey.withOpacity(0.2), blurRadius: 4, offset: Offset(0,2)),
      ],
    ),
    child: PieChart(...),
  )
  

补充说明 #

你提到用--web-renderer canvaskit能解决问题，是因为Canvaskit渲染器的布局计算和Canvas处理逻辑与HTML渲染器完全不同，不会触发这个特定的布局NaN异常。如果上述绕开方案都不适用，这也是一个临时的备选方案。

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