Displaying data from Firestore in a Horizontal ListView within a Vertical ScrollView in Flutter

Question

I am fairly new to coding in Flutter and currently, I am trying to develop an image classification application. I have a Cloud Firestore database where each document within the database consists of two fields: an image label and an image URL. An example of the structure of the database is attached below:

Example of the structure of the database

I am trying to classify the images in accordance to their respective labels and display them where the label should be displayed at the top of a scrollable horizontal ListView while the images belonging to the label are to be displayed in the scrollable horizontal ListView below. Additionally, the horizontal ListView widgets should be contained within a vertical ScrollView. The example to the display of images to be achieve is shown below:

Example of the display of images to be achieved

I have tried something like ListView and SingleChildScrollView but the furthest I have gotten to my goal is by using a StreamBuilder and a ListView.builder as shown in the code below.

Codes:

@override
Widget build(BuildContext context) {

return Scaffold(
  appBar: AppBar(
    backgroundColor: Colors.orange[400],
    centerTitle: true,
    title: Text('Revision'),
    titleTextStyle: TextStyle(
      fontSize: 24.0,
    ),
  ),

  body: StreamBuilder(
    stream: FirebaseFirestore.instance.collection('Images').snapshots(),
    builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){
      if(!snapshot.hasData){
        return Center(
          child: CircularProgressIndicator(),
        );
      }

      return ListView(
        children: snapshot.data.docs.map((document) {
            return SizedBox(
              height: 300,
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: 1,
                itemBuilder: (_, __) => Container(
                  margin: EdgeInsets.all(12), 
                  width: 300, 
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: NetworkImage(document['url']),
                      fit: BoxFit.scaleDown,
                    )
                  ),
                ),
              ),
            );
        }).toList(),
      );
    }
  ), 
);

Even then, the result is still miles away to the display of images as shown in the previous example:

Example of the result of the code

The display of the results seem to be a very common structure within applications, however, I just can't seem to get it work for days. :(

Any assistance would be greatly appreciated and if it is possible, may I ask if the code above can be modified to achieve the aforementioned results. Thank you and have a great day!

Edit (here is the code I managed to display the labels and the images altogether but have not been able to classify it):

  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange[400],
        centerTitle: true,
        title: Text('Revision'),
        titleTextStyle: TextStyle(
          fontSize: 24.0,
        ),
      ),

      body: StreamBuilder(
        stream: FirebaseFirestore.instance.collection('Images').snapshots(),
        builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot){
          if(!snapshot.hasData){
            return Center(
              child: CircularProgressIndicator(),
            );
          }
          
          return ListView(
            children: snapshot.data.docs.map((document) {
              return Center(
                child: Column(
                  children: [
                    SizedBox(height: 20),

                    Text(document['label']),

                    SizedBox(height: 20),

                    Container(
                      height: MediaQuery.of(context).size.height / 4,
                      width: MediaQuery.of(context).size.width / 1,
                      decoration: BoxDecoration(
                        image: DecorationImage(
                          image: NetworkImage(document['url']),
                          fit: BoxFit.scaleDown
                        )
                      ),
                    ),
                  ],
                ),
              );
            }).toList(),
          );
        }
      ),
    );
  }

Results: Example of the edit done

Credits to: https://medium.com/quick-code/reading-lists-from-firestore-using-streambuilder-in-flutter-eda590f461ed for the results of the edit

Answer 1

Okay, So you want a list of Image with a title/header above it that scrolls horizontally but the list can be scrolled vertically as well? Try something like this. First you want a list of images with title and image right. So you need a ListView.Builder (Builder if you don't know how many items there will be in the list, perfect for fetching data from online databases) and set the scrollDirection to horizontal and shrinkwrap to true. Inside the builder, you want to set the itemCount to the length of the items there will be (hopefully you know how its done) and return a class showData (you can name it anything)

child: ListView.builder(
      physics: ClampingScrollPhysics(),
      shrinkWrap: true,
      scrollDirection: Axis.horizontal,
      itemCount: 15,
      itemBuilder: (BuildContext context, int index) => ShowData();

Create a new class ShowData and add Card to it, in the child of card add Padding (you'll use it later for setting the space) then in the child of padding add a column like you did currently. in the column you can add the Image and the title for it, You'll get Title + Image from the database and ListView.builder will create it one at a time. so Each Title+image will be one Card, the second card will be another Title+image. Now to make it scrollable vertically just make wrap the card with singlechildscrollview (try with column if card doesnt work)

and you'll have a list of items that has a title and image and is scrollable horizontally and if there are more items below it, then it'll be scrollable vertically as well (Only if it goes below the screen)

You can get the ideas from Here Horizontal ListView inside a Vertical ScrollView in Flutter And here https://youtu.be/CQt91j_MsUw