C2Choice style property not updating without providing avatarText

[Nahom-Derese]

Reproduction Steps:

1. Create a ChipsChoice.multiple widget with multiple choice items using C2Choice.listFrom.
2. Define a style function to dynamically set the style properties of each chip based on its selected state.
3. Update the selected state of a chip by changing the value of the value property.
4. Observe that the style properties specified in the style function do not update unless an avatarText function is provided.

Expected Behavior:

When changing the selected state of a chip, the style properties specified in the style function should update accordingly, regardless of whether an avatarText function is provided.

Actual Behavior:

The style properties specified in the style function do not update unless an avatarText function is provided. Without an avatarText function, the style of the chips remains unchanged, even though the selected state changes.

Impact:

This issue affects applications that use the ChipsChoice widget and rely on dynamically updating the style of chips based on their selected state. It can lead to inconsistencies in the UI and hinder the ability to provide a consistent user experience.

Workaround:

A workaround for this issue is to provide an empty avatarText function even if it's not needed for the specific use case. This forces the ChipsChoice widget to update the style properties specified in the style function.

Environment:

Flutter version: 3.16.9 • channel stable
chips_choice package version: 3.0.1
Platform: All

Code Snippet:

ChipsChoice.multiple(
                value: selectedCashier,
                alignment: WrapAlignment.start,
                wrapCrossAlignment: WrapCrossAlignment.start,
                wrapped: true,
                padding:
                    const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                choiceItems: C2Choice.listFrom<String, CashierSummary>(
                  source: data.data!,
                  value: (index, item) => item.name,
                  label: (index, item) => item.name,
                  style: (index, item) {
                    final selected = selectedCashier.contains(item.name);
                    return C2ChipStyle(
                      borderRadius: const BorderRadius.all(Radius.circular(15)),
                      borderColor: Theme.of(context).colorScheme.primary,
                      backgroundColor: selected
                          ? Colors.White
                          : Colors.Brown,
                      foregroundColor: selected
                          ? Colors.White
                          : Colors.Brown,
                    );
                  },
                  avatarText: (index, item) {
                    bool selected = selectedCashier.contains(item.name);
                    return Icon(
                      selected
                          ? Icons.check_circle_outline
                          : Icons.circle_outlined,
                      color: !selected
                          ? Colors.White
                          : Colors.Brown,
                      size: 20,
                    );
                  },
                ),
                choiceStyle: C2ChipStyle(
                  borderRadius: const BorderRadius.all(Radius.circular(15)),
                  checkmarkColor: Theme.of(context).colorScheme.primary,
                  borderWidth: 2,
                  borderStyle: BorderStyle.solid,
                  backgroundOpacity: 1,
                ),
                onChanged: (values) {
                  ref
                      .read(selectedCashiersProvider.notifier)
                      .update((state) => state = values);
                },
              );