How to create Horizontal List View Inside Vertical List View in flutter

Question

This is my Database Structure. Categories is the Parent Node of Snacks and Beverages.

Here is my code for defining list:

  List<CategoriesOnly> categoriesOnlyList =[];
  List<CategoryItems> categoryItemList = [];

Here is the code for Storing data into list:

 var categoryName = FirebaseDatabase.instance.reference().child('Categories').once()
    .then((DataSnapshot snapShot){
      Map <dynamic, dynamic> values = snapShot.value;
      values.forEach((key1,values){
        var categoryItem = FirebaseDatabase.instance.reference().child('Categories').child(key1).once()
        .then((DataSnapshot dataSnapshot){
          print(key1);
          CategoriesOnly categoriesOnly = new CategoriesOnly(
            key1
          );
          categoriesOnlyList.add(categoriesOnly);--------Storing Category Name(i.e. Snacks and Beverages)
          var key = dataSnapshot.value.keys;
          for(var i in key){
            CategoryItems categoryItems = new CategoryItems(
                dataSnapshot.value[i]['MarketPrice'],
                dataSnapshot.value[i]['Name'],
                dataSnapshot.value[i]['OurPrice'],
                dataSnapshot.value[i]['TotalDiscount'],
                dataSnapshot.value[i]['Weight']
            );
            categoryItemList.add(categoryItems);-----Storing all their respective item.
          }
          
        });

        });
    });

Here is code for printing Category Name in Vertical ListBuilder and their Item into Horizontal ListBuilder:

  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.black, //or set color with: Color(0xFF0000FF)
    ));
    return Scaffold(
      backgroundColor: Colors.blue,
      body: SafeArea(

        child:  ListView.builder(
          itemCount: categoriesOnlyList.length,
          itemBuilder: (context, index) =>
              Column(children: [
                Text(categoriesOnlyList[index].Name),
                Container(
                  height: 100,
                  child:
                  ListView.builder(itemCount: categoryItemList.length,
                      scrollDirection: Axis.horizontal,
                      itemBuilder: (context, index) => Text(categoryItemList[index].Name)),
                ),

              ]),
        )
      ),
    );
  }
}

Here is what I got:

Inside of each Category name I got all the items of both categories(ie Inside Snacks I got all the items of Snacks and Beverages and same for Beverages ). But I want my code to display only those item which belongs to their parent category name.

Answer 1

In your CategoryItem class save the category name as well. I dont know why you are not doing that. Like this:

CategoryItems categoryItems = new CategoryItems(
                key, // your category type 
                dataSnapshot.value[i]['MarketPrice'],
                dataSnapshot.value[i]['Name'],
                dataSnapshot.value[i]['OurPrice'],
                dataSnapshot.value[i]['TotalDiscount'],
                dataSnapshot.value[i]['Weight']
            );

When you are building the listView using builder do this:

return Scaffold(
      backgroundColor: Colors.blue,
      body: SafeArea(

        child:  ListView.builder(
          itemCount: categoriesOnlyList.length,
          itemBuilder: (context, index) {
              List abc = categoryItemList.where((item) => item.key == categoriesOnlyList[index]).toList();
              return Column(children: [
                Text(categoriesOnlyList[index].Name),
                Container(
                  height: 100,
                  child:
                  ListView.builder(
                     itemBuilder: (c, i) {
                         return Text(abc[i].Name);
                     },
                     itemCount: abc.length,
                 ),

              ]);
          }
        )
      ),
    );