Apply the color of hint to the icons on text fields

turms-im · Dec 14, 2024 · 5927335 · 5927335
1 parent bfbac93
commit 5927335
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/turms-chat-demo-flutter/lib/ui/desktop/components/t_search_bar/t_search_bar.dart b/turms-chat-demo-flutter/lib/ui/desktop/components/t_search_bar/t_search_bar.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:material_symbols_icons/symbols.dart';
 
+import '../../../themes/app_theme_extension.dart';
 import '../t_text_field/t_text_field.dart';
 
 class TSearchBar extends StatelessWidget {
@@ -12,7 +13,7 @@ class TSearchBar extends StatelessWidget {
       this.autofocus = false,
       this.keepFocusOnSubmit = false,
       this.focusNode,
-      this.prefixIcon = const Icon(Symbols.search_rounded, size: 16),
+      this.prefixIcon,
       this.debounceTimeout,
       this.transformValue,
       this.onChanged,
@@ -21,7 +22,7 @@ class TSearchBar extends StatelessWidget {
   final TextEditingController? textEditingController;
   final TextStyle? style;
   final String hintText;
-  final Widget prefixIcon;
+  final Widget? prefixIcon;
   final bool autofocus;
   final bool keepFocusOnSubmit;
   final FocusNode? focusNode;
@@ -38,7 +39,12 @@ class TSearchBar extends StatelessWidget {
         focusNode: focusNode,
         style: style,
         hintText: hintText,
-        prefixIcon: prefixIcon,
+        prefixIcon: prefixIcon ??
+            Icon(
+              Symbols.search_rounded,
+              size: 16,
+              color: context.appThemeExtension.textFieldHintTextStyle.color,
+            ),
         prefixIconConstraints: const BoxConstraints.tightFor(width: 24),
         showDeleteButtonIfHasText: true,
         debounceTimeout: debounceTimeout,

diff --git a/turms-chat-demo-flutter/lib/ui/desktop/components/t_text_field/t_text_field.dart b/turms-chat-demo-flutter/lib/ui/desktop/components/t_text_field/t_text_field.dart
@@ -6,6 +6,7 @@ import 'package:material_symbols_icons/symbols.dart';
 
 import '../../../../infra/task/debouncer.dart';
 import '../../../l10n/view_models/app_localizations_view_model.dart';
+import '../../../themes/app_theme_extension.dart';
 import '../index.dart';
 import '../t_menu/t_context_menu.dart';
 
@@ -103,6 +104,7 @@ class _TTextFieldState extends ConsumerState<TTextField> {
 
   @override
   Widget build(BuildContext context) {
+    final appThemeExtension = context.appThemeExtension;
     final prefixIcon = widget.prefixIcon;
     final controller =
         (widget.textEditingController ?? _textEditingController)!;
@@ -180,7 +182,7 @@ class _TTextFieldState extends ConsumerState<TTextField> {
               height: 1.2),
       decoration: InputDecoration(
         hintText: widget.hintText,
-        hintStyle: TextStyle(color: Colors.grey.shade600),
+        hintStyle: appThemeExtension.textFieldHintTextStyle,
         filled: true,
         fillColor: const Color.fromARGB(255, 226, 226, 226),
         contentPadding: const EdgeInsets.symmetric(vertical: 10, horizontal: 8),
@@ -194,7 +196,8 @@ class _TTextFieldState extends ConsumerState<TTextField> {
                     addContainer: false,
                     iconData: Symbols.close_rounded,
                     iconSize: 20,
-                    tooltip: ref.watch(appLocalizationsViewModel).close,
+                    iconColor:
+                        context.appThemeExtension.textFieldHintTextStyle.color,
                     onTap: () {
                       controller.clear();
                       widget.onChanged?.call('');

diff --git a/turms-chat-demo-flutter/lib/ui/themes/app_theme_extension.dart b/turms-chat-demo-flutter/lib/ui/themes/app_theme_extension.dart
@@ -30,6 +30,7 @@ class AppThemeExtension extends ThemeExtension<AppThemeExtension> {
     required this.menuItemTextStyle,
     required this.popupDecoration,
     required this.tabTextStyle,
+    required this.textFieldHintTextStyle,
     required this.toastDecoration,
     required this.homePageBackgroundColor,
     required this.mainNavigationRailBackgroundColor,
@@ -99,6 +100,7 @@ class AppThemeExtension extends ThemeExtension<AppThemeExtension> {
           borderRadius: Sizes.borderRadiusCircular4,
           boxShadow: Styles.boxShadow),
       tabTextStyle: const TextStyle(color: Color.fromARGB(255, 89, 89, 89)),
+      textFieldHintTextStyle: TextStyle(color: Colors.grey.shade600),
       toastDecoration: const BoxDecoration(
         color: Colors.white,
         borderRadius: Sizes.borderRadiusCircular8,
@@ -205,6 +207,8 @@ class AppThemeExtension extends ThemeExtension<AppThemeExtension> {
 
   final TextStyle tabTextStyle;
 
+  final TextStyle textFieldHintTextStyle;
+
   final BoxDecoration toastDecoration;
 
   // Page colors/styles
@@ -270,6 +274,7 @@ class AppThemeExtension extends ThemeExtension<AppThemeExtension> {
     TextStyle? menuItemTextStyle,
     BoxDecoration? popupDecoration,
     TextStyle? tabTextStyle,
+    TextStyle? textFieldHintTextStyle,
     BoxDecoration? toastDecoration,
     Color? homePageBackgroundColor,
     Color? mainNavigationRailBackgroundColor,
@@ -327,6 +332,8 @@ class AppThemeExtension extends ThemeExtension<AppThemeExtension> {
         menuItemTextStyle: menuItemTextStyle ?? this.menuItemTextStyle,
         popupDecoration: popupDecoration ?? this.popupDecoration,
         tabTextStyle: tabTextStyle ?? this.tabTextStyle,
+        textFieldHintTextStyle:
+            textFieldHintTextStyle ?? this.textFieldHintTextStyle,
         toastDecoration: toastDecoration ?? this.toastDecoration,
         homePageBackgroundColor:
             homePageBackgroundColor ?? this.homePageBackgroundColor,
@@ -435,6 +442,8 @@ class AppThemeExtension extends ThemeExtension<AppThemeExtension> {
       popupDecoration:
           BoxDecoration.lerp(popupDecoration, other.popupDecoration, t)!,
       tabTextStyle: TextStyle.lerp(tabTextStyle, other.tabTextStyle, t)!,
+      textFieldHintTextStyle: TextStyle.lerp(
+          textFieldHintTextStyle, other.textFieldHintTextStyle, t)!,
       toastDecoration:
           BoxDecoration.lerp(toastDecoration, other.toastDecoration, t)!,
       homePageBackgroundColor: Color.lerp(