Add a way to programmatically change the selected items

[victorcatn]

Hi,
I need to chage the selected items programmatically this widget but I don't found a way to do this after setting the initial items parameter.
The only way I can make this kind of changes is creating a new unique key for each rebuild, making flutter discard the old state and create a new from the initial items but I think it is not very efficient.
Thank you.

[CHB61]

@victorcatn Hello,

Can you clarify how you would like to manage the selected items and which widget you are trying to do this with?
A code example would also be helpful.

Typically, I'll have my own list of selected items set as the initialValue, and just manage that.
initialValue not working as expected #5 - maybe this is relevant

[neilmahaseth]

#40 I was able to do it by modifying the build method of the widget refer to the issue motioned. In bloc architecture it is not possible to maintain the same reference value as with each sate change entire new object is created with a new reference. So unless the internal reference of the _selectedItems is updated it will not be possible to modify it in the bloc architecture .

[247software-vaibhav-joshi]

@CHB61 Are you planning to work on this issue, please?

[Darksoulsong]

Hi,
I need to manage the selected items from outside this widget but I don't found a way to do this after setting the initial items parameter.
I tried creating a GlobalKey and changing its state but didn't work. The only way was creating a new unique key for each build, making flutter discard the old state and create a new from the initial items but I think it is not very efficient.
Thank you.

If your goal is to update the selected items by clicking on the chip, It can be done by returning the updated value at the MultiSelectChipDiplay::onTap method, like so:

onTap: (item) {
    _selectedAnimals.remove(item);
    return _selectedAnimals;
}

[pcrady]

I think the thing that people are asking for is some kind of controller to programmatically change the content of the selected items. Currently I think the reason people are having problems is because "initialValue" is the only way to set the internal state without selecting things from a dialog or sheet. In multi_sellect_dialog_field.dart its only use is

  void initState() {
    super.initState();
    if (widget.initialValue != null) {
      _selectedItems.addAll(widget.initialValue!);
    }
  }

this doesn't allow for changing the internal state after the widget has been created. It would be nice if there were a way to do this without manually destroying the widget and rebuilding it.

[lukemadera]

Seconded - I need this ability. @Darksoulsong I tried adding the return but that removes ALL selected items, not just the one I tapped on. Is it working properly for you? Without the return, none update. With the return, all are removed. So neither is working for me.

[lgwds]

Thanks for the PR niccord! Can anyone with permissions please review the PR and approve to get this added functionality? I would need it but am happy to help if I can :)

[hsynpsdmr]

I solved this problem by interfering with the library. This works for me.
I took the set code of the library and wrapped it with the GetStorage block. In this way, I would be able to trigger my code from the outside. (You can use something else to trigger it. It will probably work.) The main reason I'm doing this here is that setState cannot interfere with the library from outside.
I added the set initial default value part.

Here, I have run my code by triggering it under any method.

Good job everyone, hope it works for you.

[ronytesler]

I think the thing that people are asking for is some kind of controller to programmatically change the content of the selected items. Currently I think the reason people are having problems is because "initialValue" is the only way to set the internal state without selecting things from a dialog or sheet. In multi_sellect_dialog_field.dart its only use is

  void initState() {
    super.initState();
    if (widget.initialValue != null) {
      _selectedItems.addAll(widget.initialValue!);
    }
  }

this doesn't allow for changing the internal state after the widget has been created. It would be nice if there were a way to do this without manually destroying the widget and rebuilding it.

How do you manually destroy and rebuild it?

[asanet]

Set the 'key' parameter to GlobalKey(). Ex:

MultiSelectChipField<String?>( key: GlobalKey(), )

[prkhrv]

@asanet Can You help me in programmatically change the selected items?

[asanet]

@asanet Can You help me in programmatically change the selected items?

Hi @prkhrv !

I am doing this way:

MultiSelectChipField<String?>(
    key: GlobalKey(), // You must set the key parameter to GlobalKey(), otherwise setState wont work
    scroll: false,
    selectedChipColor: Colors.grey,
    chipColor: Colors.black,
    chipShape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(100),
        side: BorderSide(color: Colors.grey, width: 2)
    ),
    textStyle: TextStyle(color: Colors.white),
    selectedTextStyle: TextStyle(color: Colors.white),
    decoration: const BoxDecoration(border: null),
    initialValue: _selectedValues, // This is a list of strings with the selected values
    headerColor: Colors.black,
    showHeader: false,
    items: List.generate(
        _allValues.length,
        (index) => MultiSelectItem(
            _allValues.elementAt(index), // My labels are the same of my values
            _allValues.elementAt(index),
        )
    ),
    icon: Icon(Icons.check, color: Colors.green),
    onTap: (values) {
      setState(() {
        _selectedValues = values; // Setstate the value.
      });
    },
  )

Everytime I want to change the selected values, I change the variable "_selectedValues" then I call setState. This only works with you attribute the GLobalKey() to the parameter "key" in MultiSelectChipField.

Hope it helps!

[prkhrv]

@asanet Thanks a Lot!

[elgsylvain85]

Set the 'key' parameter to GlobalKey(). Ex:

MultiSelectChipField<String?>( key: GlobalKey(), )

Thank you guy. I think that is best solution for the moment.

[faran08]

@asanet Can You help me in programmatically change the selected items?

Hi @prkhrv !

I am doing this way:

MultiSelectChipField<String?>(
    key: GlobalKey(), // You must set the key parameter to GlobalKey(), otherwise setState wont work
    scroll: false,
    selectedChipColor: Colors.grey,
    chipColor: Colors.black,
    chipShape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(100),
        side: BorderSide(color: Colors.grey, width: 2)
    ),
    textStyle: TextStyle(color: Colors.white),
    selectedTextStyle: TextStyle(color: Colors.white),
    decoration: const BoxDecoration(border: null),
    initialValue: _selectedValues, // This is a list of strings with the selected values
    headerColor: Colors.black,
    showHeader: false,
    items: List.generate(
        _allValues.length,
        (index) => MultiSelectItem(
            _allValues.elementAt(index), // My labels are the same of my values
            _allValues.elementAt(index),
        )
    ),
    icon: Icon(Icons.check, color: Colors.green),
    onTap: (values) {
      setState(() {
        _selectedValues = values; // Setstate the value.
      });
    },
  )

Everytime I want to change the selected values, I change the variable "_selectedValues" then I call setState. This only works with you attribute the GLobalKey() to the parameter "key" in MultiSelectChipField.

Hope it helps!

Great, Thanks brother. It works.