Merging Duplicate Items in Choice Chip into 1

[AathifMahir]

Is your feature request related to a problem? Please describe.

currently, If we have duplicates in the choice chip, filter list still shows the duplicate.

Describe the solution you'd like

it would be great if we have option to merge duplicate items into 1.

[AathifMahir]

@TheAlphamerc Hi, I'm waiting for your take on this issue, will be waiting for your reply

Thanks

[TheAlphamerc]

Hi @AathifMahir, If you don't want to display duplicates item in choice chip then you can remove those duplicate items from list before providing the list to the FilterListDialog.

[AathifMahir]

Hi @AathifMahir, If you don't want to display duplicates item in choice chip then you can remove those duplicate items from list before providing the list to the FilterListDialog.

I have tried that since the choice chip is built based on the data that's available in the list based on index, I can't seem to remove that, i need to find a way to merge data from choice chip after the data is built and merge those indexes

Do you have any suggestions for that?

[TheAlphamerc]

Can you share the sample list data that you are using ?

[AathifMahir]

@TheAlphamerc you can check this video for better understanding on the scenario that I'm currently facing

The data is coming from firestore

[TheAlphamerc]

I didn't understand what you trying to say through video. Help me understanding the issue, I'll try to find a way to resolve this.

[AathifMahir]

I didn't understand what you trying to say through video. Help me understanding the issue, I'll try to find a way to resolve this.

Accessing the data using provider with a modal for Productsdata, the datas were pulled from firestore based on the attributes,

By the way all the single data has the status eg: halal lv1, halal lv2, haram lv1, etc..

The status is the things that used for data filtering that built inside the chicechip, since status is available in every single object, the all single status available in the data gets built inside the choicechip based on index on data,

Now, i need to merge those duplicates status into single item in choicechip

Eg: there's multiple status called Halal Lv1 inside the choice chip, i need to make that single item, likewise all other different status

[TheAlphamerc]

What you are passing to the FilterListDialog ?
I mean List<String> or List<Object>

[AathifMahir]

What you are passing to the FilterListDialog ?

I mean List<String> or List<Object>

I'm passing List' into FilterListDialog

[TheAlphamerc]

What type of List you are passing ?

[AathifMahir]

What type of List you are passing ?

List with ProductModel as data

[AathifMahir]

Give me couple of minutes, I'll share my full code

[TheAlphamerc]

That would be helpful.

[TheAlphamerc]

@AathifMahir do share the code of _openFilterDialog method instead of screenshot.

[AathifMahir]

@TheAlphamerc Here you go

late List<ProductModel> selectedUserList = [];

  void _openFilterDialog() async {
    await FilterListDialog.display<ProductModel>(
       context,
       listData: widget.product,
       selectedListData: selectedUserList,
       height: 480,
       // headlineText: "Select Users",
       searchFieldHintText: "Search Here",
       choiceChipLabel: (item) {
          return item!.status;
        },
       hideCloseIcon: true,
       hideheader: true,
       hideHeaderText: true,
       hideSearchField: true,
       backgroundColor: Theme.of(context).colorScheme.background,
       applyButonTextBackgroundColor: Theme.of(context).colorScheme.primary,
       selectedTextBackgroundColor: Theme.of(context).colorScheme.primary,
       borderRadius: MySize.size5!,
       controlButtonTextStyle: Theme.of(context).textTheme.subtitle2,
       applyButtonTextStyle: Theme.of(context).textTheme.subtitle2,
       unselectedTextbackGroundColor: Theme.of(context).disabledColor,
       controlContainerDecoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(MySize.size3!))),
        // buttonRadius: MySize.size5!,
       validateSelectedItem: (list, val) {
          return list!.contains(val);
       },
       onApplyButtonClick: (list) {
          setState(() {
             selectedUserList = List.from(list!);
           });
           // Navigator.pop(context);
        },

       /// uncomment below code to create custom choice chip
       choiceChipBuilder: (context, item, isSelected) {
          return Container(
             padding: EdgeInsets.symmetric(
                 horizontal: MySize.size10, vertical: MySize.size10),
             margin: EdgeInsets.symmetric(
                 horizontal: MySize.size10, vertical: MySize.size10),
             decoration: BoxDecoration(
               borderRadius: BorderRadius.all(Radius.circular(MySize.size3!)),
                  color: isSelected!
                    ? Theme.of(context).colorScheme.primary
                    : Theme.of(context).disabledColor,
               ),
              child: Text(
                item!.status,
                 style:
                  AppTheme.getTextStyle(Theme.of(context).textTheme.subtitle2),
            ));
       },
    );
  }

[TheAlphamerc]

@AathifMahir Before passing the all data list to the FilterListDialog remove duplicate elements. Have a look on below code.

late List<ProductModel> selectedUserList = [];

void _openFilterDialog() async {
  
   /// List of all products
    List<ProductModel> list = widget.product;
  
    var uniqueList = list.map((e) => e.status).toSet();
   
   /// Remove duplicate products having same uniqueTempList
    list.retainWhere((x) => uniqueList.remove(x.status));

    /// List of all selected products
    List<ProductModel> tempSelectedList = selectedUserList;
   
     if(selectedUserList != null and selectedUserList.isNotEmpty){
       var uniqueTempList = tempSelectedList.map((e) => e.status).toSet();
   
        /// Remove duplicate selected products having same 
        tempSelectedList.retainWhere((x) => uniqueTempList.remove(x.status));
      }
   


    await FilterListDialog.display<ProductModel>(
       context,
       listData:list,
       selectedListData: tempSelectedList,
       height: 480,
    
       searchFieldHintText: "Search Here",
       choiceChipLabel: (item) {
          return item!.status;
        },
       validateSelectedItem: (list, val) {
          return list!.contains(val);
       },
       onApplyButtonClick: (list) {
          widget.product.forEach((element) {
             if (list.any((model) => model.status == element.status)) {
               selectedUserList.add(element);
             }
            });
          setState(() {  });
           // Navigator.pop(context);
        },

       /// uncomment below code to create custom choice chip
       choiceChipBuilder: (context, item, isSelected) {
          return Container(
             padding: EdgeInsets.symmetric(
                 horizontal: MySize.size10, vertical: MySize.size10),
             margin: EdgeInsets.symmetric(
                 horizontal: MySize.size10, vertical: MySize.size10),
             decoration: BoxDecoration(
               borderRadius: BorderRadius.all(Radius.circular(MySize.size3!)),
                  color: isSelected!
                    ? Theme.of(context).colorScheme.primary
                    : Theme.of(context).disabledColor,
               ),
              child: Text(
                item!.status,
                 style:
                  AppTheme.getTextStyle(Theme.of(context).textTheme.subtitle2),
            ));
       },
    );
  }

[AathifMahir]

@AathifMahir Before passing the all data list to the FilterListDialog remove duplicate elements. Have a look on below code.

late List<ProductModel> selectedUserList = [];

void _openFilterDialog() async {
  
   /// List of all products
    List<ProductModel> list = widget.product;
  
    var uniqueList = list.map((e) => e.status).toSet();
   
   /// Remove duplicate products having same uniqueTempList
    list.retainWhere((x) => uniqueList.remove(x.status));

    /// List of all selected products
    List<ProductModel> tempSelectedList = selectedUserList;
   
     if(selectedUserList != null and selectedUserList.isNotEmpty){
       var uniqueTempList = tempSelectedList.map((e) => e.status).toSet();
   
        /// Remove duplicate selected products having same 
        tempSelectedList.retainWhere((x) => uniqueTempList.remove(x.status));
      }
   


    await FilterListDialog.display<ProductModel>(
       context,
       listData:list,
       selectedListData: tempSelectedList,
       height: 480,
    
       searchFieldHintText: "Search Here",
       choiceChipLabel: (item) {
          return item!.status;
        },
       validateSelectedItem: (list, val) {
          return list!.contains(val);
       },
       onApplyButtonClick: (list) {
          widget.product.forEach((element) {
             if (list.any((model) => model.status == element.status)) {
               selectedUserList.add(element);
             }
            });
          setState(() {  });
           // Navigator.pop(context);
        },

       /// uncomment below code to create custom choice chip
       choiceChipBuilder: (context, item, isSelected) {
          return Container(
             padding: EdgeInsets.symmetric(
                 horizontal: MySize.size10, vertical: MySize.size10),
             margin: EdgeInsets.symmetric(
                 horizontal: MySize.size10, vertical: MySize.size10),
             decoration: BoxDecoration(
               borderRadius: BorderRadius.all(Radius.circular(MySize.size3!)),
                  color: isSelected!
                    ? Theme.of(context).colorScheme.primary
                    : Theme.of(context).disabledColor,
               ),
              child: Text(
                item!.status,
                 style:
                  AppTheme.getTextStyle(Theme.of(context).textTheme.subtitle2),
            ));
       },
    );
  }

@TheAlphamerc Sorry, You must've misunderstood. I only need to remove duplicate status not the products. I need to have all the products show as before whenever filter a status like Halal Lv1, that means all the products has that status should be shown on listview.

[TheAlphamerc]

@AathifMahir Before passing the all data list to the FilterListDialog remove duplicate elements. Have a look on below code.

late List<ProductModel> selectedUserList = [];

void _openFilterDialog() async {
  
   /// List of all products
    List<ProductModel> list = widget.product;
  
    var uniqueList = list.map((e) => e.status).toSet();
   
   /// Remove duplicate products having same uniqueTempList
    list.retainWhere((x) => uniqueList.remove(x.status));

    /// List of all selected products
    List<ProductModel> tempSelectedList = selectedUserList;
   
     if(selectedUserList != null and selectedUserList.isNotEmpty){
       var uniqueTempList = tempSelectedList.map((e) => e.status).toSet();
   
        /// Remove duplicate selected products having same 
        tempSelectedList.retainWhere((x) => uniqueTempList.remove(x.status));
      }
   


    await FilterListDialog.display<ProductModel>(
       context,
       listData:list,
       selectedListData: tempSelectedList,
       height: 480,
    
       searchFieldHintText: "Search Here",
       choiceChipLabel: (item) {
          return item!.status;
        },
       validateSelectedItem: (list, val) {
          return list!.contains(val);
       },
       onApplyButtonClick: (list) {
          widget.product.forEach((element) {
             if (list.any((model) => model.status == element.status)) {
               selectedUserList.add(element);
             }
            });
          setState(() {  });
           // Navigator.pop(context);
        },

       /// uncomment below code to create custom choice chip
       choiceChipBuilder: (context, item, isSelected) {
          return Container(
             padding: EdgeInsets.symmetric(
                 horizontal: MySize.size10, vertical: MySize.size10),
             margin: EdgeInsets.symmetric(
                 horizontal: MySize.size10, vertical: MySize.size10),
             decoration: BoxDecoration(
               borderRadius: BorderRadius.all(Radius.circular(MySize.size3!)),
                  color: isSelected!
                    ? Theme.of(context).colorScheme.primary
                    : Theme.of(context).disabledColor,
               ),
              child: Text(
                item!.status,
                 style:
                  AppTheme.getTextStyle(Theme.of(context).textTheme.subtitle2),
            ));
       },
    );
  }

This will display only unique status in filter dialog box when you make some selection then it will display all those products having selected status. It won't remove the products from the list that you are displaying.

[AathifMahir]

@TheAlphamerc But, it removes the product as well

[TheAlphamerc]

Have you tried the code ?

[AathifMahir]

Yes, i have tried that code, Give me sec i'll share the code

[AathifMahir]

@TheAlphamerc

late List selectedUserList = [];

void _openFilterDialog() async {
List list = widget.product;

var uniqueList = list.map((e) => e.status).toSet();

/// Remove duplicate products having same uniqueTempList
list.retainWhere((x) => uniqueList.remove(x.status));

/// List of all selected products
List<ProductModel> tempSelectedList = selectedUserList;

if (selectedUserList != null && selectedUserList.isNotEmpty) {
  var uniqueTempList = tempSelectedList.map((e) => e.status).toSet();

  /// Remove duplicate selected products having same
  tempSelectedList.retainWhere((x) => uniqueTempList.remove(x.status));
}

await FilterListDialog.display<ProductModel>(
  context,
  listData: list,
  selectedListData: tempSelectedList,
  height: 480,
  // headlineText: "Select Users",
  searchFieldHintText: "Search Here",
  choiceChipLabel: (item) {
    return item!.status;
  },
  hideCloseIcon: true,
  hideheader: true,
  hideHeaderText: true,
  hideSearchField: true,
  backgroundColor: Theme.of(context).colorScheme.background,
  applyButonTextBackgroundColor: Theme.of(context).colorScheme.primary,
  selectedTextBackgroundColor: Theme.of(context).colorScheme.primary,
  borderRadius: MySize.size5!,
  controlButtonTextStyle: Theme.of(context).textTheme.subtitle2,
  applyButtonTextStyle: Theme.of(context).textTheme.subtitle2,
  unselectedTextbackGroundColor: Theme.of(context).disabledColor,
  controlContainerDecoration: BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(MySize.size3!))),
  // buttonRadius: MySize.size5!,
  validateSelectedItem: (list, val) {
    return list!.contains(val);
  },

  onItemSearch: (list, text) {
    if (list != null) {
      if (list.any((element) =>
          element.status!.toLowerCase().contains(text.toLowerCase()))) {
        /// return list which contains matches
        return list
            .where((element) =>
                element.status!.toLowerCase().contains(text.toLowerCase()))
            .toList();
      }
    }

    return [];
  },

  onApplyButtonClick: (list) {
    widget.product.forEach((element) {
      if (list!.any((model) => model.status == element.status)) {
        selectedUserList.add(element);
      }
    });
    // setState(() {  });
    setState(() {
      selectedUserList = List.from(list!);
    });
    // Navigator.pop(context);
  },

  /// uncomment below code to create custom choice chip
  choiceChipBuilder: (context, item, isSelected) {
    // return Container(
    //   padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    //   margin: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
    //   decoration: BoxDecoration(
    //       border: Border.all(
    //     color: isSelected! ? Colors.blue[300]! : Colors.grey[300]!,
    //   )),
    //   child: Text(
    //     item.status,
    //     style: TextStyle(
    //         color: isSelected ? Colors.blue[300] : Colors.grey[300]),
    //   ),
    // );
    return Container(
        padding: EdgeInsets.symmetric(
            horizontal: MySize.size10, vertical: MySize.size10),
        margin: EdgeInsets.symmetric(
            horizontal: MySize.size10, vertical: MySize.size10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(MySize.size3!)),
          color: isSelected!
              ? Theme.of(context).colorScheme.primary
              : Theme.of(context).disabledColor,
        ),
        child: Text(
          item!.status,
          style:
              AppTheme.getTextStyle(Theme.of(context).textTheme.subtitle2),
        ));
  },
);

}

Only 2 products were showing since all the duplicates in the choice chips were removed, there should be around 7 to products totally

[TheAlphamerc]

Try replacing below code

    /// List of all products
    List<ProductModel> list = widget.product;

With

 /// List of all products
    List<ProductModel> list = List.from(widget.product);

[AathifMahir]

Try replacing below code

    /// List of all products
    List<ProductModel> list = widget.product;

With

 /// List of all products
    List<ProductModel> list = List.from(widget.product);

Still the same, still showing only 2 products

[TheAlphamerc]

Try replacing below code

 onApplyButtonClick: (list) {
    widget.product.forEach((element) {
      if (list!.any((model) => model.status == element.status)) {
        selectedUserList.add(element);
      }
    });
    // setState(() {  });
    setState(() {
      selectedUserList = List.from(list!);
    });
    // Navigator.pop(context);
  },

with

 onApplyButtonClick: (list) {
      if(selectedUserList == null){
         selectedUserList = [];
        }
          widget.product.forEach((element) {
             if (list.any((model) => model.status == element.status)) {
               selectedUserList.add(element);
             }
            });
          setState(() {  });
           // Navigator.pop(context);
        },

[AathifMahir]

@TheAlphamerc Everything seems to working fine except top 2 products,

here's the code

late List selectedUserList = List.from(widget.product);

void _openFilterDialog() async {
List list = List.from(widget.product);

var uniqueList = list.map((e) => e.status).toSet();

/// Remove duplicate products having same uniqueTempList
list.retainWhere((x) => uniqueList.remove(x.status));

/// List of all selected products
List<ProductModel> tempSelectedList = selectedUserList;

if (selectedUserList != null && selectedUserList.isNotEmpty) {
  var uniqueTempList = tempSelectedList.map((e) => e.status).toSet();

  /// Remove duplicate selected products having same
  tempSelectedList.retainWhere((x) => uniqueTempList.remove(x.status));
}

await FilterListDialog.display<ProductModel>(
  context,
  listData: list,
  selectedListData: tempSelectedList,
  height: 480,
  // headlineText: "Select Users",
  searchFieldHintText: "Search Here",
  choiceChipLabel: (item) {
    return item!.status;
  },
  hideCloseIcon: true,
  hideheader: true,
  hideHeaderText: true,
  hideSearchField: true,
  backgroundColor: Theme.of(context).colorScheme.background,
  applyButonTextBackgroundColor: Theme.of(context).colorScheme.primary,
  selectedTextBackgroundColor: Theme.of(context).colorScheme.primary,
  borderRadius: MySize.size5!,
  controlButtonTextStyle: Theme.of(context).textTheme.subtitle2,
  applyButtonTextStyle: Theme.of(context).textTheme.subtitle2,
  unselectedTextbackGroundColor: Theme.of(context).disabledColor,
  controlContainerDecoration: BoxDecoration(
      borderRadius: BorderRadius.all(Radius.circular(MySize.size3!))),
  // buttonRadius: MySize.size5!,
  validateSelectedItem: (list, val) {
    return list!.contains(val);
  },

  onItemSearch: (list, text) {
    if (list != null) {
      if (list.any((element) =>
          element.status!.toLowerCase().contains(text.toLowerCase()))) {
        /// return list which contains matches
        return list
            .where((element) =>
                element.status!.toLowerCase().contains(text.toLowerCase()))
            .toList();
      }
    }

    return [];
  },

  onApplyButtonClick: (list) {
    if (selectedUserList == null) {
      selectedUserList = [];
    } else {
      widget.product.forEach((element) {
        if (list!.any((model) => model.status == element.status)) {
          selectedUserList.add(element);
        }
      });
    }
    setState(() {
      selectedUserList = List.from(selectedUserList);
    });
  },

  /// uncomment below code to create custom choice chip
  choiceChipBuilder: (context, item, isSelected) {
    // return Container(
    //   padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
    //   margin: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
    //   decoration: BoxDecoration(
    //       border: Border.all(
    //     color: isSelected! ? Colors.blue[300]! : Colors.grey[300]!,
    //   )),
    //   child: Text(
    //     item.status,
    //     style: TextStyle(
    //         color: isSelected ? Colors.blue[300] : Colors.grey[300]),
    //   ),
    // );
    return Container(
        padding: EdgeInsets.symmetric(
            horizontal: MySize.size10, vertical: MySize.size10),
        margin: EdgeInsets.symmetric(
            horizontal: MySize.size10, vertical: MySize.size10),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(MySize.size3!)),
          color: isSelected!
              ? Theme.of(context).colorScheme.primary
              : Theme.of(context).disabledColor,
        ),
        child: Text(
          item!.status,
          style:
              AppTheme.getTextStyle(Theme.of(context).textTheme.subtitle2),
        ));
  },
);

}

[TheAlphamerc]

We need to handle a case where onApplyButtonClick returns empty or null list.

Try replacing below code

 onApplyButtonClick: (list) {
    widget.product.forEach((element) {
      if (list!.any((model) => model.status == element.status)) {
        selectedUserList.add(element);
      }
    });
    // setState(() {  });
    setState(() {
      selectedUserList = List.from(list!);
    });
    // Navigator.pop(context);
  },

with

 onApplyButtonClick: (list) {
  if(!(list != null && list.isNotEmpty)){
    
      setState(() {
          selectedUserList = []; /// Now we have assigned null value to `selectedUserList` then you have to add null check value in ui where `selectedUserList` is used.
       });
      return;
   }
     if (selectedUserList == null) {
      selectedUserList = [];
    } else {
      widget.product.forEach((element) {
        if (list!.any((model) => model.status == element.status)) {
          selectedUserList.add(element);
        }
      });
    }
    setState(() {
      selectedUserList = List.from(selectedUserList);
    });
  },

[AathifMahir]

@TheAlphamerc Fixed the issue, Thanks a lot for help

here's complete code:

late List<ProductModel> selectedUserList = List.from(widget.product);

  void _openFilterDialog() async {
    List<ProductModel> list = List.from(widget.product);

    debugPrint("Data List: ${list.toString()}");

    var uniqueList = list.map((e) => e.status).toSet();

    /// Remove duplicate products having same uniqueTempList
    list.retainWhere((x) => uniqueList.remove(x.status));

    /// List of all selected products
    List<ProductModel> tempSelectedList = selectedUserList;

    if (selectedUserList != null && selectedUserList.isNotEmpty) {
      var uniqueTempList = tempSelectedList.map((e) => e.status).toSet();

      /// Remove duplicate selected products having same
      tempSelectedList.retainWhere((x) => uniqueTempList.remove(x.status));
    }

    await FilterListDialog.display<ProductModel>(
      context,
      listData: list,
      selectedListData: tempSelectedList,
      height: 480,
      // headlineText: "Select Users",
      searchFieldHintText: "Search Here",
      choiceChipLabel: (item) {
        return item!.status;
      },
      hideCloseIcon: true,
      hideheader: true,
      hideHeaderText: true,
      hideSearchField: true,
      backgroundColor: Theme.of(context).colorScheme.background,
      applyButonTextBackgroundColor: Theme.of(context).colorScheme.primary,
      selectedTextBackgroundColor: Theme.of(context).colorScheme.primary,
      borderRadius: MySize.size5!,
      controlButtonTextStyle: Theme.of(context).textTheme.subtitle2,
      applyButtonTextStyle: Theme.of(context).textTheme.subtitle2,
      unselectedTextbackGroundColor: Theme.of(context).disabledColor,
      controlContainerDecoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(MySize.size3!))),
      // buttonRadius: MySize.size5!,
      validateSelectedItem: (list, val) {
        return list!.contains(val);
      },

      onItemSearch: (list, text) {
        if (list != null) {
          if (list.any((element) =>
              element.status!.toLowerCase().contains(text.toLowerCase()))) {
            /// return list which contains matches
            return list
                .where((element) =>
                    element.status!.toLowerCase().contains(text.toLowerCase()))
                .toList();
          }
        }

        return [];
      },

      onApplyButtonClick: (list) {
        if (!(list != null && list.isNotEmpty)) {
          setState(() {
            selectedUserList = [];
            list = [];

            /// Now we have assigned null value to `selectedUserList` then you have to add null check value in ui where `selectedUserList` is used.
          });
          return;
        }
        if (selectedUserList == null || list == null) {
          setState(() {
            selectedUserList = [];
            list = [];
          });
        } else {
         widget.product.forEach((element) {
            if (list!.any((model) => model.status == element.status)) {
              debugPrint("Elements: ${element.status}");
              selectedUserList.add(element);
              if (list!.contains(element) != true) {
                list!.add(element);
              }
            }
          });
        }
        setState(() {
          selectedUserList = List.from(list!);
        });
      
      },

      /// uncomment below code to create custom choice chip
      choiceChipBuilder: (context, item, isSelected) {
      return Container(
            padding: EdgeInsets.symmetric(
                horizontal: MySize.size10, vertical: MySize.size10),
            margin: EdgeInsets.symmetric(
                horizontal: MySize.size10, vertical: MySize.size10),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(MySize.size3!)),
              color: isSelected!
                  ? Theme.of(context).colorScheme.primary
                  : Theme.of(context).disabledColor,
            ),
            child: Text(
              item!.status,
              style:
                  AppTheme.getTextStyle(Theme.of(context).textTheme.subtitle2),
            ));
      },
    );
  }

[TheAlphamerc]

@AathifMahir Now you understand Why I was saying that you can remove duplicate values after passing to the sdk.

[AathifMahir]

@TheAlphamerc I think it would be great that if this merging duplicate items in choicechip would be built into filter_list module as boolean value to enable or disable merging duplicate choicechip items