Flutter报错：Future<List<PieChartSectionData>>无法赋值给List<PieChartSectionData>?

问题原因 #

你调用showingSections()时，因为这是个异步函数，返回的是Future<List<PieChartSectionData>>类型对象，但PieChartData的sections参数需要直接传入List<PieChartSectionData>?类型，两者类型不匹配导致了报错。

解决方案1：使用FutureBuilder（快速适配） #

直接用FutureBuilder包裹饼图组件，等待异步函数返回数据后再渲染：

Expanded(
  child: AspectRatio(
    aspectRatio: 1,
    child: FutureBuilder<List<PieChartSectionData>>(
      future: showingSections(),
      builder: (context, snapshot) {
        // 数据加载中显示加载指示器
        if (snapshot.connectionState == ConnectionState.waiting) {
          return const Center(child: CircularProgressIndicator());
        }
        // 加载出错显示错误提示
        if (snapshot.hasError) {
          return const Center(child: Text('数据加载失败'));
        }
        // 数据加载完成，渲染饼图
        final sections = snapshot.data;
        return PieChart(
          PieChartData(
            pieTouchData: PieTouchData(
              touchCallback: (FlTouchEvent event, pieTouchResponse) {},
            ),
            borderData: FlBorderData(),
            sectionsSpace: 0,
            centerSpaceRadius: 40,
            sections: sections,
          ),
        );
      },
    ),
  ),
)

解决方案2：在State中缓存数据（适合复杂场景） #

如果需要复用数据或更精细控制加载状态，可以把数据存在页面状态中，初始化时异步获取：

1. 在State类中定义状态变量：

List<PieChartSectionData>? _pieSections;
bool _isLoading = true;
String? _loadError;

2. 在initState中触发数据加载：

@override
void initState() {
  super.initState();
  _loadPieData();
}

Future<void> _loadPieData() async {
  try {
    final sections = await showingSections();
    setState(() {
      _pieSections = sections;
      _isLoading = false;
    });
  } catch (e) {
    setState(() {
      _loadError = e.toString();
      _isLoading = false;
    });
  }
}

3. 根据状态渲染UI：

Expanded(
  child: AspectRatio(
    aspectRatio: 1,
    child: _isLoading
        ? const Center(child: CircularProgressIndicator())
        : _loadError != null
            ? Center(child: Text('加载失败: $_loadError'))
            : PieChart(
                PieChartData(
                  pieTouchData: PieTouchData(
                    touchCallback: (FlTouchEvent event, pieTouchResponse) {},
                  ),
                  borderData: FlBorderData(),
                  sectionsSpace: 0,
                  centerSpaceRadius: 40,
                  sections: _pieSections,
                ),
              ),
  ),
)

方案对比 #

• 方案1适合简单场景，代码量少，但如果showingSections()每次build都会被调用，可能重复请求数据（可以把future存在State里避免重复调用）。
• 方案2更适合需要保留数据、控制加载状态的复杂页面，避免重复异步请求。

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