-
Notifications
You must be signed in to change notification settings - Fork 41
Description
Reproduction Steps:
- Create a
ChipsChoice.multiplewidget with multiple choice items usingC2Choice.listFrom. - Define a
stylefunction to dynamically set the style properties of each chip based on its selected state. - Update the selected state of a chip by changing the value of the
valueproperty. - Observe that the
styleproperties specified in the style function do not update unless anavatarTextfunction 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);
},
);