skip to Main Content

I have a FireStore collection named "products" and in there I have documents consisting of product data such as name, price, and category. It follows the structure like this

    {
     "name": "Milk Shake Strawberry",
     "price": "250",
     "category": "Drinks",
     "categoryID:1234
   },
   {
     "name": "Swiss Roll",
     "price": "150",
     "category": "Cake",
     "categoryID":1235
   }

I map all the product data to ProductItemData using the following code,

List<Map<String, dynamic>?>? productItemsData = snapshots.data?.docs
                              .map((e) => e.data() as Map<String, dynamic>?)
                              .toList();

Using forEach, I collect the List of Category names into this

List<String> _tabs = [];

        for (var doc in productItemsData!) {
                            Map<String, dynamic> data =
                                doc as Map<String, dynamic>;
                            if (!_tabs.contains(data["category"])) {
                              _tabs.add(data["category"]);
                            }
                          }

So I can show the data(product items) in a TabBar View. With all the products under the relevant category name.

To get the relevant product items I use the following code to get Widgets that show product data.

    List<Widget> _list = [];
for (int i = 0; i < productItemsData!.length; i++) {
  if(productItemsData![i]!["category"] == category) {
    _list.add(_buildCustomProductTile(context, productItemsData![i]));
  }
} return list;

This far my requirement is 100% working as expected. But now I want to reorder the categories according to an index, and when the UI shows the products I want them to be in that order.

To store the categories and categoryID’s I have a different collection, and it goes similar to this,

    {
     "index": "0",
     "categoryName": "Drinks",
     "categoryID:1234
   },
   {
     "index": "1",
     "categoryName": "Cake",
     "categoryID":1235
   }

By using ReorderableListView I reorder the categories by changing the index in onReorder function.

My problem now is How can I use this different collection which has category name,id and index to sort the products collection by category index?

2

Answers


  1. To sort the "products" collection by the category index, you can make a separate query to the "category" collection to get the category index and then use that index to sort the "products" collection. You can use the following code to get the sorted "products" data:

    List<Map<String, dynamic>> sortedProductData = [];
    for (var doc in categoryData!) {
      Map<String, dynamic> data = doc as Map<String, dynamic>;
      for (var product in productItemsData!) {
        Map<String, dynamic> productData = product as Map<String, dynamic>;
        if (productData["category"] == data["categoryName"]) {
          sortedProductData.insert(data["index"], productData);
          break;
        }
      }
    }
    

    Note: categoryData is the data obtained from the "category" collection and productItemsData is the data obtained from the "products" collection.

    Login or Signup to reply.
  2. if you want to sort the last snippet data you can use sort method like this

       myList.sort((a, b) => int.parse(a["index"].toString())
        .compareTo(int.parse(b["index"].toString())));
    

    checkout the full code here https://dartpad.dev/?id=252d17ac9c3f254da2955bb90da83d29

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search