How to display all products by category and sub-category wise in a single screen?

I have a list of products in my database as follows: Database Structure

I want the output as follows: App output

I got the data by sending http request to the script.php :

    $get_all_products = $conn->query("SELECT * FROM dummy_products_madurms");
    $products = array();

    while ($rowData = $get_all_products->fetch_assoc()) {
        $products[] = $rowData;
    }

    echo json_encode($products);
}

but how do I achieve the output dynamically? as of now, i have hardcoded the widgets. And also i tried some way of outputting,output error but the categories and the sub categories are repeating many times as in the pic above. Here is the logic i tried. Any help would be really really helpful, as i am completely a beginner in flutter.Thanks in advance:

List<Widget> createContent() {
      List<Widget> contentall = [];
      double height = 0.0;
      List<Widget> content = [];
      categories.forEach((cat) {
        bool isThere = false;
        Widget container = CategoryTitle(title: cat);
        content.add(container);
        subCategories.forEach((subCat) {
          List<Widget> listCont = [];
          var isubCat = subCat;
          var sortedProdList = productList
              .where((element) => element.subCategory == isubCat)
              .toList();
          print(sortedProdList.length);
          sortedProdList.forEach((prod) {
            listCont.add(SingleListProduct(imageUrl: prod.url));
            isThere = true;
          });
          if (isThere) {
            Widget subCont = SubCategoryTitle(title: subCat);
            content.add(subCont);
            isThere = false;
            Widget listViewContainer = ListViewContainer(childs: listCont);
            content.add(listViewContainer);
            listCont = [];
          }
          height += 0.15;
          Widget cont1 = DragCard(
            height: height,
            count: content.length,
            content: content,
          );
          contentall.add(cont1);
        });
      });

      return contentall;
    } ```


 

Answer

I was able to solve it by changing the logic and requested data structure a little bit, and adding the widgets accordingly. Here, if we add our widgets instead of those print statements, we could achieve the output in the above question. DartPad example
No.1 – Create category and sub-category Map:-

  List<Map<String, Object>> cat = [
    {
      "category": "Cosmetics",
      "subCategory": ["Skin Care", "Body Care"],
    },
    {
      "category": "Food Products",
      "subCategory": ["Masala Products"],
    }
  ];

No.2 – Create Dummy List of products:-

  List<Map<String, Object>> products = [
    {
      "id": "1",
      "product_name": "Fair and Lovely",
      "price": "200",
      "category": "Cosmetics",
      "sub_category": "Skin Care"
    },
    {
      "id": "2",
      "product_name": "Lifeboy",
      "price": "300",
      "category": "Cosmetics",
      "sub_category": "Skin Care"
    },
    {
      "id": "3",
      "product_name": "Ponds ",
      "price": "250",
      "category": "Cosmetics",
      "sub_category": "Skin Care"
    },
    {
      "id": "4",
      "product_name": "Parachute",
      "price": "450",
      "category": "Cosmetics",
      "sub_category": "Body Care"
    },
    {
      "id": "5",
      "product_name": "Nivea Men",
      "price": "1900",
      "category": "Cosmetics",
      "sub_category": "Body Care"
    },
    {
      "id": "6",
      "product_name": "Coriander Powder",
      "price": "2200",
      "category": "Food Products",
      "sub_category": "Masala Products"
    }
  ];

No.3 – Create a Loop which will display supplied widgets automatically by categories:-

category.forEach((singleCat) {
    var categ = singleCat["category"];
    List<String> subCat = singleCat["subCategory"];
    print("Category is $categ and n");
    subCat.forEach((sc) {
      var curSc = sc;
      print("  Sub Category is $curSc and n");
      products.forEach((prod) {
        if (prod["category"] == categ && prod["sub_category"] == curSc) {
          print(
              "    ${prod["product_name"]} and product price is ${prod["price"]}n");
        }
      });
    });
  });