firestore map to StreamBuilder => ListView.Builder

Question

i want to show the songs list inside document (singer that user clicked on). Every song should load in list tile but all of them load in one tile. and it loads the 'songs list' from all documents(all singers).

this is the FireStore DB this is list of singers to choose from. this should show only the songs from selected singer each one in a tile but shows all songs from all singers. and every singers song in one tile

class SongsList extends StatefulWidget {
  @override
  _SongsListState createState() => _SongsListState();
}

class _SongsListState extends State<SongsList> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder(
        stream: Firestore.instance.collection('singers').snapshots(),
        builder: (
          context,
          snapshot,
        ) {
          if (snapshot.data == null)
            return Center(
              child: CircularProgressIndicator(
                backgroundColor: Colors.red,
                valueColor: new AlwaysStoppedAnimation<Color>(Colors.teal),
              ),
            );
          return Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage('assets/back.png'), fit: BoxFit.contain)),
            child: ListView.builder(
                itemCount: snapshot.data.documents.length,
                itemBuilder: (context, index) {
                  var result = snapshot.data.documents[index]['songs list'];
                  return SingleChildScrollView(
                    child: Padding(
                      padding: const EdgeInsets.only(
                          left: 10, right: 10, top: 10, bottom: 0),
                      child: Container(
                        height: 50,
                        width: 300,
                        decoration: BoxDecoration(
                            color: Colors.white,
                            boxShadow: [
                              BoxShadow(
                                color: Colors.white.withOpacity(0.5),
                                spreadRadius: 1.5,
                                blurRadius: 1.5,
                                //offset: Offset(0, 1), // changes position of shadow
                              ),
                            ],
                            borderRadius: BorderRadius.circular(5),
                            border: Border.all(
                                color: Colors.red[200],
                                width: 0.5,
                                style: BorderStyle.solid)),
                        child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: <Widget>[
                              for (var res in result.entries)
                                Text(
                                  res.key,
                                  style: TextStyle(
                                      fontSize: 20, color: Colors.red[500]),
                                ),
                            ]),
                      ),
                    ),
                  );
                }),
          );
        },
      ),
    );
  }
}

Answer 1

List tile has a corresponding index. I think you might have to build a list tile instead of a container. If you need a container, you have to write a code that would specifically get the singers name (documentID) wired on each container

Answer 2

If you want to get only the songs of one singer, then you need to specify the document id to retrieve one document, change this:

 stream: Firestore.instance.collection('singers').snapshots(),

into this:

stream: Firestore.instance.collection('singers').document('aryana sayeed').snapshots(),