如何在单个屏幕中按类别和子类别明智地显示所有产品？

Question

我的数据库中有如下产品列表： Database Structure

我想要输出如下： App output

我通过向 script.php 发送 http 请求获得了数据：

    $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);
}

但是如何动态实现输出呢？截至目前，我已经对小部件进行了硬编码。我也尝试了一些输出方式，output error 但是类别和子类别重复了很多次，如上图所示。这是我试过的逻辑。任何帮助都会非常有用，因为我完全是 flutter.Thanks 的初学者：

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 1

我能够通过稍微更改逻辑和请求的数据结构并相应地添加小部件来解决它。在这里，如果我们添加我们的小部件而不是那些打印语句，我们就可以实现上述问题的输出。 DartPad example
No.1 - 创建类别和子类别地图：-

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

No.2 - 创建产品虚拟列表:-

  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 - 创建一个循环，它将按类别自动显示提供的小部件：-

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");
        }
      });
    });
  });

如何在单个屏幕中按类别和子类别明智地显示所有产品？

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

php

data-structures

flutter

flutter-layout

flutter-widget