show border instead of changing background color for selected containers

This commit is contained in:
Fabian Freund
2026-01-01 09:12:19 +01:00
parent d448087122
commit 40267a637f
2 changed files with 12 additions and 3 deletions
@@ -99,6 +99,7 @@ class ContainerChips extends HookConsumerWidget {
itemId: (container) => container.id,
itemBackgroundColor: (container) =>
container.color.withValues(alpha: 0.33),
selectedBorderColor: Theme.of(context).colorScheme.primary,
itemLabel: (container) =>
ContainerTitle(container: container),
itemBadgeCount: (container) =>
@@ -70,6 +70,7 @@ class SelectableChips<T extends S, S, K> extends StatelessWidget {
final String? Function(T item)? itemTooltip;
final int? Function(T item)? itemBadgeCount;
final Color? Function(T item)? itemBackgroundColor;
final Color? selectedBorderColor;
final Widget Function(Widget child, S item)? itemWrap;
@@ -85,6 +86,7 @@ class SelectableChips<T extends S, S, K> extends StatelessWidget {
this.itemWrap,
this.itemTooltip,
this.itemBackgroundColor,
this.selectedBorderColor,
this.prefixListItems = const [],
required this.availableItems,
this.selectedItem,
@@ -133,6 +135,8 @@ class SelectableChips<T extends S, S, K> extends StatelessWidget {
}
final item = items[index - prefixListItems.length];
final isSelected = selectedItem != null &&
itemId(item) == itemId(selectedItem as S);
final child = Padding(
padding: const EdgeInsets.only(right: 8.0, top: 4.0),
child: _BadgeWrapper(
@@ -143,9 +147,7 @@ class SelectableChips<T extends S, S, K> extends StatelessWidget {
() => callback(item),
),
child: FilterChip(
selected:
selectedItem != null &&
itemId(item) == itemId(selectedItem as S),
selected: selectedBorderColor == null && isSelected,
showCheckmark: false,
onSelected: (value) {
if (value) {
@@ -163,6 +165,12 @@ class SelectableChips<T extends S, S, K> extends StatelessWidget {
avatar: itemAvatar?.call(item),
tooltip: itemTooltip?.call(item),
backgroundColor: itemBackgroundColor?.call(item),
side: isSelected && selectedBorderColor != null
? BorderSide(
color: selectedBorderColor!,
width: 2.0,
)
: null,
),
),
),