Как создать список виджетов из базы данных Firebase FireStore?

Question

Я пытаюсь выяснить, как перебирать документы в firestore и создавать текстовый виджет для каждого из них.

Я выяснил, как получить доступ к этим элементам.Я использовал debugPrint () и получил ожидаемые результаты, но не могу отобразить его под моими другими виджетами.Я получаю красный экран с кучей ошибок (на телефоне). Ниже приведен код того, что я пробовал до сих пор.

   QuerySnapshot querySnapshot = await 
Firestore.instance.collection("users").document(user.uid).collection("trails").getDocuments();
        var list = querySnapshot.documents;
list.forEach((doc) =>  debugPrint(doc.data["Trail Name"].toString()));//works
final topContentText = Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
      //these widgets are generating correctly  
      Text(
          "First Name: $firstName",
          style: TextStyle(color: Colors.white, ),
        ),
        Text(
          "Last Name: $lastName",
          textAlign: TextAlign.left,
          style: TextStyle(color: Colors.white,),
        ),
        Text(
          "Email: $email",
          style: TextStyle(color: Colors.white, ),
        ),
     //these ones are causing my errors.
    list.forEach((doc) =>  Text(
      "Trail Name: ${doc.data["Trail Name"].toString()}",
      style: TextStyle(color: Colors.white, ),
    ),)
      ],
    );

    final topContent = Stack(
      children: <Widget>[
        Container(
          height: MediaQuery.of(context).size.height * 0.40,
          padding: EdgeInsets.all(40.0),
          width: MediaQuery.of(context).size.width,
          decoration: BoxDecoration(color: Color.fromRGBO(58, 66, 86, .9)),
          child: Center(
            child: topContentText,
          ),
        ),
        Positioned(
          left: 8.0,
          top: 60.0,
          child: InkWell(
            onTap: () {
              Navigator.pop(context);
            },
            child: Icon(Icons.arrow_back, color: Colors.white),
          ),
        )
      ],
    );
    return Scaffold(
      body: Column(
        children: <Widget>[topContent, bottomContent],
      ),
    );

Экран на моем устройстве горит красным с ошибками при создании дочернего элементавиджеты, когда я ожидаю, что он будет отображать имена следов ниже другой информации.Я включил только необходимый код, но мог бы включить больше (например, метод сборки виджета), если это необходимо.Спасибо за любую помощь.Я новичок, чтобы трепетать.

Answer 1

Попробуйте использовать функцию карты:

  List<Widget> _widgets = list.map((doc) =>  Text(
    "Trail Name: ${doc.data["Trail Name"].toString()}",
    style: TextStyle(color: Colors.white, ),
  ),).toList();

А затем для дочерних элементов столбца просто добавьте этот список в указанный вами список, например:

children: [ ... ] + _widgets;