Flutter卡片选择器：替换JSON为Firestore加载数据遇RangeError求助

问题背景 #

将Flutter卡片选择器的数据源从本地JSON替换为Firestore后，运行触发RangeError (index): Invalid value: Valid value range is empty: 0错误。

错误原因 #

1. getData()是异步函数，执行时不会阻塞initState的后续代码执行
2. initState中直接将空的accountList赋值给_cards，此时Firestore数据尚未返回
3. 直接访问_cards![0]触发空数组的索引越界错误

修复方案 #

1. 异步数据加载后更新状态 #

修改getData()函数，在数据成功获取后通过setState()更新组件状态，确保只有数据加载完成后才操作数组：

late DocumentSnapshot snapshot;
List<Map<String, dynamic>>? _cards;
Map<String, dynamic>? _data;
List<Map<String, dynamic>> accountList = [];

getData() async {
  final dataDB = await FirebaseFirestore.instance.collection('UserData').doc(getUid()).get();
  snapshot = dataDB;
  final Map<String, dynamic> documentData = snapshot.data() as Map<String, dynamic>;
  accountList = (documentData['accounts'] as List).map((account) => account as Map<String, dynamic>).toList();
  
  // 数据加载完成后更新状态
  setState(() {
    _cards = accountList;
    // 仅当数组非空时赋值第一个元素
    if (_cards != null && _cards!.isNotEmpty) {
      _data = _cards![0];
      print('Datac: $_data');
    }
  });
}

2. 修正initState逻辑 #

移除initState中同步操作未加载数据的代码，仅调用异步加载函数：

@override
void initState() {
  super.initState();
  getData();

  controller.addListener(() {
    setState(() {
      closeTopContainer = controller.offset > 0;
      openAppBar = controller.offset < 50;
    });
  });
}

3. UI层添加空安全判断 #

在构建UI时先判断数据是否加载完成，避免空指针或索引错误：

@override
Widget build(BuildContext context) {
  // 数据未加载完成时显示加载状态
  if (_cards == null || _cards!.isEmpty) {
    return const Center(child: CircularProgressIndicator());
  }
  
  // 数据加载完成后构建卡片选择器UI
  return Scaffold(
    // 你的卡片选择器代码
  );
}

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