Flutter报错type 'Future<List>'不是'List'子类型该怎么解决

报错原因 #

你调用的getDataGraphCA()是async异步方法，返回值类型是Future<List<dynamic>>，异步任务没有执行完成时拿不到实际的List结果，直接强制类型转换as List就会触发这个类型不匹配报错。

修复步骤 #

1. 调整组件类型为StatefulWidget + 使用FutureBuilder处理异步数据 #

将原来的无状态组件改成有状态组件，通过FutureBuilder监听异步任务的执行状态，加载完成后再渲染图表：

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'bdd_graph_annee.dart';

class SimpleBarChart extends StatefulWidget {
  final String anneeCA;
  const SimpleBarChart({Key? key, required this.anneeCA}) : super(key: key);

  @override
  State<SimpleBarChart> createState() => _SimpleBarChartState();
}

class _SimpleBarChartState extends State<SimpleBarChart> {
  late Future<List<CaMoisData>> _futureCaMois;

  @override
  void initState() {
    super.initState();
    _futureCaMois = _getCaMoisData();
  }

  Future<List<CaMoisData>> _getCaMoisData() async {
    // 等待异步查询返回结果
    final rawData = await BddAMKGraphCA().getDataGraphCA(widget.anneeCA);
    List<CaMoisData> list = [];
    if (rawData.isNotEmpty) {
      // 你的SQL返回的是单行列数据，需要把列转成CaMoisData对象
      final row = rawData.first;
      // 定义月份和字段的映射关系
      final monthMap = [
        {'name': 'Janv', 'field': 'tot_01'},
        {'name': 'Févr', 'field': 'tot_02'},
        {'name': 'Mars', 'field': 'tot_03'},
        {'name': 'Avril', 'field': 'tot_04'},
        {'name': 'Mai', 'field': 'tot_05'},
        // 剩下的月份可以自己按规则补全
      ];
      for (var item in monthMap) {
        // 处理数值格式：把SQL替换后的逗号换回小数点再转double
        String amountStr = row[item['field']].toString().replaceAll(',', '.');
        double amount = double.parse(amountStr);
        list.add(CaMoisData(item['name'] as String, amount));
      }
    }
    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('CA PAR MOIS')),
      body: Center(
        child: FutureBuilder<List<CaMoisData>>(
          future: _futureCaMois,
          builder: (context, snapshot) {
            // 加载中状态
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const CircularProgressIndicator();
            }
            // 报错状态
            if (snapshot.hasError) {
              return Text('加载失败：${snapshot.error}');
            }
            // 加载成功渲染图表
            final caMois = snapshot.data!;
            return SfCartesianChart(
              title: ChartTitle(text: 'CA DE ${widget.anneeCA}'),
              series: <ChartSeries>[
                BarSeries<CaMoisData, String>(
                  animationDuration: 1500,
                  dataSource: caMois,
                  xValueMapper: (CaMoisData monCa, _) => monCa.mois,
                  yValueMapper: (CaMoisData monCa, _) => monCa.ca,
                  dataLabelSettings: const DataLabelSettings(isVisible: true),
                ),
              ],
              primaryXAxis: CategoryAxis(),
              primaryYAxis: NumericAxis(
                edgeLabelPlacement: EdgeLabelPlacement.shift,
              ),
            );
          },
        ),
      ),
    );
  }
}

2. 可选优化：SQL返回格式调整 #

如果后续要补全全年12个月的数据，你可以直接修改SQL按行返回月份和对应营业额，省去手动映射的步骤，不用再把列转成行。

注意事项 #

• 异步方法必须用await才能拿到实际返回的结果，不能直接对Future类型做强制类型转换
• 你SQL里用replace把数值的小数点换成了逗号，转double之前要把逗号换回小数点，否则会触发格式解析报错

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