fix(komodo_ui): use textTheme colors for dropdown text styling#303
fix(komodo_ui): use textTheme colors for dropdown text styling#303
Conversation
sync main
chore: release v0.9.4 - GLEEC rebrand and KDF v2.6.0
Updated searchable_select.dart to: - Use text color from textTheme instead of colorScheme.onSurface which is misused as a background color in some consuming apps - Add null safety fallbacks for textTheme.bodyLarge to prevent potential crashes when the text style is null This ensures dropdown items display with correct text contrast regardless of how the consuming app configures onSurface.
There was a problem hiding this comment.
Pull request overview
This PR addresses text visibility issues in dropdown components by updating the text color strategy. The core change implements a fallback mechanism that uses textTheme colors instead of relying on colorScheme.onSurface, which some themes incorrectly configure as a background color.
Key changes:
- Introduced text color fallback logic in
_DropdownItemWidgetusingtextTheme.bodyLarge?.colorwith brightness-based defaults - Added null safety checks for text styles in
DefaultSelectedItemViewandSelectItemWidget - Changed
search_coin_select.dartto usetextTheme.bodyMediuminstead oflistTileTheme.titleTextStyle
Note: While the PR improves null safety and introduces the new text color pattern in _DropdownItemWidget, the implementation is incomplete. Both DefaultSelectedItemView (line 305) and SelectItemWidget (line 754) still use theme.colorScheme.onSurface directly, which doesn't fully address the stated problem.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
searchable_select.dart |
Adds text color fallback logic in _DropdownItemWidget, improves null safety in text style access, and reformats code for consistency |
search_coin_select.dart |
Changes coin name text styling from listTileTheme.titleTextStyle to textTheme.bodyMedium for consistency |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| style: theme.textTheme.bodyLarge!.copyWith( | ||
| color: theme.colorScheme.onSurface, | ||
| ), | ||
| style: textStyle.copyWith(color: theme.colorScheme.onSurface), |
There was a problem hiding this comment.
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.
| style: theme.textTheme.bodyLarge!.copyWith( | ||
| color: theme.colorScheme.onSurface, | ||
| ), | ||
| style: textStyle.copyWith(color: theme.colorScheme.onSurface), |
There was a problem hiding this comment.
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.
| style: textStyle.copyWith(color: theme.colorScheme.onSurface), | |
| style: textStyle.copyWith( | |
| color: textStyle.color ?? | |
| (theme.brightness == Brightness.dark | |
| ? Colors.white | |
| : Colors.black), | |
| ), |
|
Visit the preview URL for this PR (updated for commit c90936b): https://komodo-playground--pr303-fix-wallet-pr-onsurf-n5knox8t.web.app (expires Wed, 17 Dec 2025 23:20:55 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: 2bfedd77fdea45b25ba7c784416e81f177aa5c47 |
Summary
Fixes dropdown text color visibility issues by using
textThemecolors instead ofcolorScheme.onSurface. Some themes misuseonSurfaceas a background color, causing text to be invisible or hard to read in dropdown menus.Changes
search_coin_select.darttheme.textTheme.bodyMediuminstead oftheme.listTileTheme.titleTextStylefor consistent text stylingsearchable_select.darttextTheme.bodyLarge?.colorwith appropriate brightness fallbackDefaultSelectedItemViewto safely access text styles with null checksSelectItemWidgetto use safe text style accessWhy
The
colorScheme.onSurfaceproperty is intended to be the color that contrasts with the surface color. However, some custom themes incorrectly configure this value, leading to poor text visibility. UsingtextThemecolors provides a more reliable text color that respects the theme's intended design.