How to display all products by category and sub-category wise in a single screen?
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");
}
});
});
});
Akash R
Updated on December 26, 2022Comments
-
Akash R over 1 year
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; } ```