Flutter中charts_flutter的ArcRendererElement类型转换报错解决

问题描述 #

开发Flutter应用使用charts_flutter包时遇到类型转换错误：尝试将List<ArcRendererElement<dynamic>>转换为List<ArcRendererElement<Object>>?时触发类型不匹配报错，初步判断问题与饼图配置相关，具体报错信息与业务代码如下：

报错信息 #

type 'List<ArcRendererElement<dynamic>>' is not a subtype of type 'List<ArcRendererElement<Object>>?' in type cast

原始问题代码 #

import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';

class ExpenseChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;
  
  const ExpenseChart({Key? key, required this.seriesList, required this.animate}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return charts.PieChart(
      seriesList,
      animate: animate,
      animationDuration: Duration(seconds: 1),
      defaultRenderer: charts.ArcRendererConfig(
        arcWidth: 12,
        strokeWidthPx: 0,
        arcRendererDecorators: [
          charts.ArcLabelDecorator(
            labelPadding: 0,
            showLeaderLines: false,
            outsideLabelStyleSpec: charts.TextStyleSpec(
              fontSize: 12,
              color: charts.MaterialPalette.white,
            )
          ),
        ],
      ),
    );
  }
}

查阅官方文档调整相关类型参数后错误仍存在，需要明确错误产生根因与可行修复方案。

错误根因 #

该错误是Dart强类型校验下的泛型类型不匹配导致：

• 声明seriesList时使用了无泛型参数的List<charts.Series>类型，会被Dart自动推导为List<charts.Series<dynamic>>
• PieChart、ArcRendererConfig、ArcLabelDecorator等组件未显式指定泛型时，会跟随传入的Series类型做推导，最终生成List<ArcRendererElement<dynamic>>类型的渲染元素列表
• charts_flutter内部饼图渲染逻辑接收的参数类型为List<ArcRendererElement<Object>>?，Dart中泛型参数不支持dynamic隐式转换为Object匹配，因此触发类型强转失败报错。

修复方案 #

给所有涉及图表的组件显式指定统一的泛型参数即可，无明确业务数据类型时可直接指定Object，如果有自定义的图表数据类，替换为对应实际数据类类型一致性更好。
修复后可正常运行的代码如下：

import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';

class ExpenseChart extends StatelessWidget {
  // 若有自定义业务数据类，将此处Object替换为实际数据类型即可
  final List<charts.Series<Object, String>> seriesList;
  final bool animate;
  
  const ExpenseChart({Key? key, required this.seriesList, required this.animate}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 给PieChart指定和Series一致的泛型
    return charts.PieChart<Object>(
      seriesList,
      animate: animate,
      animationDuration: Duration(seconds: 1),
      // 渲染配置同样指定相同泛型
      defaultRenderer: charts.ArcRendererConfig<Object>(
        arcWidth: 12,
        strokeWidthPx: 0,
        arcRendererDecorators: [
          // 标签装饰器也需要指定相同泛型
          charts.ArcLabelDecorator<Object>(
            labelPadding: 0,
            showLeaderLines: false,
            outsideLabelStyleSpec: charts.TextStyleSpec(
              fontSize: 12,
              color: charts.MaterialPalette.white,
            )
          ),
        ],
      ),
    );
  }
}

补充说明 #

创建seriesList实例时，也要保证charts.Series的泛型和上述代码中指定的类型一致，避免其他位置出现类型不匹配问题。

内容的提问来源于stack exchange，提问作者pomoworko.com