Skip to content

fix(komodo_ui): use textTheme colors for dropdown text styling #303

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
CharlVS wants to merge 5 commits into
base: dev
Choose a base branch
from
Open

fix(komodo_ui): use textTheme colors for dropdown text styling #303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7c1f9aa
Merge pull request #292 from KomodoPlatform/dev
ca333 Nov 13, 2025
8fcf207
Merge pull request #293 from KomodoPlatform/dev
ca333 Nov 13, 2025
1d913dd
Merge pull request #302 from GLEECBTC/dev
CharlVS Dec 10, 2025
7054a3c
fix(komodo_ui): use textTheme colors for dropdown text styling
CharlVS Dec 10, 2025
c90936b
style(komodo_ui): format searchable_select code style
CharlVS Dec 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 13 additions & 14 deletions packages/komodo_ui/lib/src/core/inputs/search_coin_select.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,19 @@ Future<AssetId?> showCoinSearch(
DropdownMenuItem<AssetId> Function(AssetId coinId)? customCoinItemBuilder,
}) {
final theme = Theme.of(context);
final items =
coins.map((assetId) {
return customCoinItemBuilder?.call(assetId) ??
DropdownMenuItem<AssetId>(
value: assetId,
child: Row(
children: [
AssetIcon(assetId),
const SizedBox(width: 12),
Text(assetId.name, style: theme.listTileTheme.titleTextStyle),
],
),
);
}).toList();
final items = coins.map((assetId) {
return customCoinItemBuilder?.call(assetId) ??
DropdownMenuItem<AssetId>(
value: assetId,
child: Row(
children: [
AssetIcon(assetId),
const SizedBox(width: 12),
Text(assetId.name, style: theme.textTheme.bodyMedium),
],
),
);
}).toList();

return showSearchableSelect<AssetId>(
context: context,
Expand Down
123 changes: 57 additions & 66 deletions packages/komodo_ui/lib/src/core/inputs/searchable_select.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -245,10 +245,9 @@ class SearchableSelectView<T> extends StatelessWidget {
width: isExpanded ? double.infinity : null,
decoration: BoxDecoration(
border: Border.all(
color:
hasError
? theme.colorScheme.error
: theme.colorScheme.onSurface.withOpacity(0.1),
color: hasError
? theme.colorScheme.error
: theme.colorScheme.onSurface.withOpacity(0.1),
),
borderRadius: BorderRadius.circular(8),
),
Expand All @@ -261,29 +260,21 @@ class SearchableSelectView<T> extends StatelessWidget {
color: theme.colorScheme.onSurfaceVariant,
fontSize: theme.textTheme.bodyLarge?.fontSize,
),
errorStyle:
hasError
? TextStyle(
color: theme.colorScheme.error,
fontSize: 12,
)
: null,
errorBorder:
hasError
? OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
color: theme.colorScheme.error,
),
)
: null,
errorStyle: hasError
? TextStyle(color: theme.colorScheme.error, fontSize: 12)
: null,
errorBorder: hasError
? OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(color: theme.colorScheme.error),
)
: null,
),
isEmpty: selectedItem == null,
child:
selectedItem == null
? null
: selectedItemBuilder?.call(context, selectedItem) ??
DefaultSelectedItemView(item: selectedItem),
child: selectedItem == null
? null
: selectedItemBuilder?.call(context, selectedItem) ??
DefaultSelectedItemView(item: selectedItem),
),
),
);
Expand All @@ -305,13 +296,13 @@ class DefaultSelectedItemView extends StatelessWidget {
if (dropdownItem.child is Row) {
return dropdownItem.child;
} else {
final textStyle =
theme.textTheme.bodyLarge ?? const TextStyle(fontSize: 14);
return Row(
children: [
Expanded(
child: DefaultTextStyle(
style: theme.textTheme.bodyLarge!.copyWith(
color: theme.colorScheme.onSurface,
),
style: textStyle.copyWith(color: theme.colorScheme.onSurface),
Copy link

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The text color is still using theme.colorScheme.onSurface instead of the new approach with textTheme colors and brightness fallback. This is inconsistent with the changes in _DropdownItemWidget (lines 407-414) and doesn't fully address the stated problem of themes misusing onSurface as a background color.

Copilot uses AI. Check for mistakes.
child: dropdownItem.child,
),
),
Expand Down Expand Up @@ -375,14 +366,12 @@ class SearchableSelectorDelegate<T> extends SearchDelegate<T?> {

@override
Widget buildResults(BuildContext context) {
final results =
items
.where(
(item) => _getItemText(
item,
).toLowerCase().contains(query.toLowerCase()),
)
.toList();
final results = items
.where(
(item) =>
_getItemText(item).toLowerCase().contains(query.toLowerCase()),
)
.toList();

return ListView.builder(
itemCount: results.length,
Expand Down Expand Up @@ -415,8 +404,14 @@ class _DropdownItemWidget<T> extends StatelessWidget {
final theme = Theme.of(context);
final inputTheme = theme.inputDecorationTheme;

// Use the text color from textTheme since some themes misuse onSurface
// as a background color.
final textColor =
theme.textTheme.bodyLarge?.color ??
(theme.brightness == Brightness.dark ? Colors.white : Colors.black);

final defaultTextStyle = theme.textTheme.bodyLarge?.copyWith(
color: inputTheme.labelStyle?.color ?? theme.colorScheme.onSurface,
color: textColor,
);

return InkWell(
Expand All @@ -425,10 +420,9 @@ class _DropdownItemWidget<T> extends StatelessWidget {
padding:
inputTheme.contentPadding ??
const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
child:
defaultTextStyle == null
? item.child
: DefaultTextStyle(style: defaultTextStyle, child: item.child),
child: defaultTextStyle == null
? item.child
: DefaultTextStyle(style: defaultTextStyle, child: item.child),
),
);
}
Expand Down Expand Up @@ -495,10 +489,9 @@ Future<T?> showDropdownSearch<T>(
_overlayEntry = OverlayEntry(
builder: (context) {
// Calculate width based on minWidth parameter if provided
final dropdownWidth =
minWidth != null
? math.max(renderBox.size.width, minWidth)
: renderBox.size.width;
final dropdownWidth = minWidth != null
? math.max(renderBox.size.width, minWidth)
: renderBox.size.width;

return GestureDetector(
onTap: () => onItemSelected(null),
Expand All @@ -508,10 +501,9 @@ Future<T?> showDropdownSearch<T>(
Positioned(
left: offset.dx,
// Position above or below based on available space
top:
showAbove
? offset.dy - requiredSpace
: offset.dy + renderBox.size.height,
top: showAbove
? offset.dy - requiredSpace
: offset.dy + renderBox.size.height,
width: dropdownWidth,
child: _SearchOverlay(
items: items,
Expand Down Expand Up @@ -565,14 +557,12 @@ class _SearchOverlayState<T> extends State<_SearchOverlay<T>> {
void updateSearchQuery(String newQuery) {
setState(() {
query = newQuery;
filteredItems =
widget.items
.where(
(item) => _getItemText(
item,
).toLowerCase().contains(query.toLowerCase()),
)
.toList();
filteredItems = widget.items
.where(
(item) =>
_getItemText(item).toLowerCase().contains(query.toLowerCase()),
)
.toList();
// Reset focus when items change
_focusedIndex = filteredItems.isNotEmpty ? 0 : -1;
});
Expand All @@ -595,8 +585,9 @@ class _SearchOverlayState<T> extends State<_SearchOverlay<T>> {
});
} else if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
setState(() {
_focusedIndex =
_focusedIndex <= 0 ? filteredItems.length - 1 : _focusedIndex - 1;
_focusedIndex = _focusedIndex <= 0
? filteredItems.length - 1
: _focusedIndex - 1;
});
} else if (event.logicalKey == LogicalKeyboardKey.enter ||
event.logicalKey == LogicalKeyboardKey.space) {
Expand Down Expand Up @@ -704,10 +695,9 @@ InputDecorationTheme defaultSearchableSelectTheme(
) {
final isDark = themeMode == Brightness.dark;
final surfaceColor = isDark ? Colors.grey[900] : Colors.grey[50];
final borderColor =
isDark
? colorScheme.onSurface.withOpacity(0.1)
: colorScheme.outline.withOpacity(0.2);
final borderColor = isDark
? colorScheme.onSurface.withOpacity(0.1)
: colorScheme.outline.withOpacity(0.2);

return InputDecorationTheme(
filled: true,
Expand Down Expand Up @@ -751,16 +741,17 @@ class SelectItemWidget extends StatelessWidget {
Widget build(BuildContext context) {
final theme = Theme.of(context);

final textStyle =
theme.textTheme.bodyLarge ?? const TextStyle(fontSize: 14);

return InkWell(
onTap: onTap,
child: Row(
children: [
if (leading != null) ...[leading!, const SizedBox(width: 12)],
Expanded(
child: DefaultTextStyle(
style: theme.textTheme.bodyLarge!.copyWith(
color: theme.colorScheme.onSurface,
),
style: textStyle.copyWith(color: theme.colorScheme.onSurface),
Copy link

Copilot AI Dec 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The text color is still using theme.colorScheme.onSurface instead of the new approach with textTheme colors and brightness fallback that was introduced in _DropdownItemWidget (lines 407-414). This is inconsistent and doesn't fully address the stated problem of themes misusing onSurface as a background color.

Suggested change
style: textStyle.copyWith(color: theme.colorScheme.onSurface),
style: textStyle.copyWith(
color: textStyle.color ??
(theme.brightness == Brightness.dark
? Colors.white
: Colors.black),
),

Copilot uses AI. Check for mistakes.
child: title,
),
),
Expand Down
Loading