Retrieve array from Firebase in Flutter

Question

I want to retrieve array from firebase or cloud_firestore. I have no problem with retrieving single data but i am having problem with retrieving array data please help my beginner mind is at the verge of exploding. I have google it and gone through many tutorials videos but i can't find the solution

database image here

pubspec.yaml
dependencies:
  
  cloud_firestore: ^0.13.6

main.dart

import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
 return MaterialApp(
   debugShowCheckedModeBanner: false,
   title: 'Flutter Demo',
   theme: ThemeData(
     primarySwatch: Colors.blue,
     visualDensity: VisualDensity.adaptivePlatformDensity,
   ),
   home: Scaffold(
     appBar: AppBar(title: Text("Flutter Fire CRUD")),
     body: ListPage(),
   ),
 );
}
}

class ListPage extends StatefulWidget {
@override
_ListPageState createState() => _ListPageState();
}

class _ListPageState extends State<ListPage> {
Future _data;
Future getUsers() async {
 var firestore = Firestore.instance;
 firestore.collection("users").getDocuments();
 QuerySnapshot qn = await firestore.collection("users").getDocuments();
 return qn.documents;
}

navigateToDetail(DocumentSnapshot users) {
 Navigator.push(context,
     MaterialPageRoute(builder: (context) => DetailList(users: users)));
}

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

 _data = getUsers();
}

@override
Widget build(BuildContext context) {
 return Container(
   child: FutureBuilder(
     future: _data,
     builder: (context, snapshot) {
       if (snapshot.connectionState == ConnectionState.waiting) {
         return Text("Loading ...");
       } else {
         return ListView.builder(
           itemCount: snapshot.data.length,
           itemBuilder: (context, index) {
             return ListTile(
                 title: Text(snapshot.data[index].data['name']),
                 onTap: () {
                   navigateToDetail(snapshot.data[index]);
                 });
           },
         );
       }
     },
   ),
 );
}
}

class DetailList extends StatefulWidget {
final DocumentSnapshot users;

DetailList({Key key, @required this.users}) : super(key: key);
@override
_DetailListState createState() => _DetailListState();
}

class _DetailListState extends State<DetailList> {

@override
Widget build(BuildContext context) {
 return Scaffold(
   appBar: AppBar(
     title: Text("${widget.users.data['name']}"),
   ),
   body: Column(
     children: [
       Container(
         height: MediaQuery.of(context).size.height / 2.0,
         width: MediaQuery.of(context).size.width,
         child: Center(
           child: Image.network(widget.users.data["img"]),
         ),
       ),
       Container(
         child: Card(
           child: ListTile(
             title: Text(widget.users.data["name"]),
             subtitle: Text("Age:" + widget.users.data["age"]),
           ),
         ),
       ),
       ListView.builder(
         itemCount: widget.users.data["skills"],
         itemBuilder: (context, index) {
           return ListTile(
             //title: Text(widget.users.data["skills"][index]),
             title: here............
           );
         },
       )
     ],
   ),
 );
}
}

Answer 1

           StreamBuilder(
                  stream: Firestore.instance
                      .collection('users')
                      .document(id)
                      .collection('chatWith')
                      .orderBy('timestamp', descending: true)
                      .snapshots(),

                  builder: (context, snapshot) {
                    if (!snapshot.hasData) {
                      return Center(
                        child: CircularProgressIndicator(
                          valueColor: AlwaysStoppedAnimation<Color>(
                              AppColor.colorCustom),
                        ),
                      );
                    } else {
                      if (snapshot.data.documents.length == 0) {
                        return Container(
                          alignment: Alignment.center,
                          child: Text(
                            "No Chat History Found",
                            style: TextStyle(
                              color: Colors.grey,
                              fontWeight: FontWeight.normal,
                              fontSize:
                                  Util.px_23 * SizeConfig.textMultiplier,
                              fontFamily: 'Roboto',
                            ),
                            softWrap: true,
                          ),
                        );
                      } else {
                        return ListView.builder(
                          padding: EdgeInsets.all(
                              Util.px_10 * SizeConfig.heightMultiplier),
                          itemBuilder: (context, index) => _listItem(
                              context, snapshot.data.documents[index]),
                          itemCount: snapshot.data.documents.length,
                        );
                      }
                    }
                  },
                )

You can fetch list of data from firestore. this code I have used in my project. You can modify as per your requirement.