Flutter读取Firestore数组：如何拆分显示单个元素

问题根源 #

你当前拿到的companies是嵌套数组（比如[[tcs, infy, wipro]]），因为_dataC.docs.map(...)会把每个文档中的skills数组都收集成一个新列表。如果你的集合里只有一个存储skills数组的文档，最终companies的长度就是1，导致ListView只渲染1项，而里面的元素才是你要的公司列表。

解决方案 #

情况1：集合中只有1个存储skills数组的文档 #

直接读取该文档的skills字段作为companies的数据源：

List companies = [];
fireData() async {
  var _dataC = await FirebaseFirestore.instance.collection('comp').doc(uida).collection('comp').get();
  // 取第一个文档的skills数组（确保集合中存在这个文档）
  var comList = _dataC.docs.first.get('skills') as List;

  setState(() {
    companies = comList;
  });
}

对应的ListView渲染代码：

ListView.builder(
  itemCount: companies.length,
  itemBuilder: (BuildContext context, int index) {
    return Container(
      width: size.width * 0.1,
      child: Card(
        child: ListTile(
          leading: Text(companies[index], style: TextStyle(color: Colors.black)),
        ),
      ),
    );
  },
)

情况2：集合中有多个文档，每个文档都有skills数组 #

如果需要把所有文档中的skills元素合并成一个列表，使用expand扁平化数组：

List companies = [];
fireData() async {
  var _dataC = await FirebaseFirestore.instance.collection('comp').doc(uida).collection('comp').get();
  // 扁平化所有文档的skills数组，合并成一个大列表
  var comList = _dataC.docs.expand((doc) => doc.get('skills') as List).toList();

  setState(() {
    companies = comList;
  });
}

ListView渲染代码和情况1一致，此时companies会包含所有文档中的公司元素，每个元素单独渲染成卡片。

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