[Bug] Fix issue with dark mode and improve customization for search v…

…iew (#212)
Fintasys · Aug 15, 2024 · 0978a59 · 0978a59
1 parent 244e243
commit 0978a59
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,9 @@
 - Allow custom icon for Backspace and Search button
 - Replace `showBackspaceButton` in `CategoryViewConfig` with `extraTab` to allow choosing between Backspace, Search or no extra button in category tab bar
 - Fix scroll issue on Linux
+- Remove `buttonColor` property in `SearchViewConfig` because it had no effect
+- Add `inputTextStyle` and `hintTextStyle` in `SearchViewConfig` for better customization
+- Fix issue with dark mode support in search view
 
 ## 2.2.0
 

diff --git a/README.md b/README.md
@@ -145,8 +145,9 @@ All examples can be found [here](https://github.com/Fintasys/emoji_picker_flutte
 | showBackspaceButton   | Show backspace button in bottom action bar   | true         |
 | showSearchViewButton  | Show search-view button in bottom action bar | true         |
 | backgroundColor       | Background color of bottom action bar        | Colors.blue  |
-| buttonColor           | Fill color of buttons in bottom action bar   | Colors.blue  |
 | buttonIconColor       | Icon color of buttons                        | Colors.white |
+| inputTextStyle        | Custom TextStyle of TextField for input text | null         |
+| hintTextStyle         | Custom TextStyle of TextField for hint       | null         |
 | customBottomActionBar | Customize the bottom action bar widget       | null         |
 
 ## Search View Config

diff --git a/example/lib/main_whatsapp.dart b/example/lib/main_whatsapp.dart
@@ -431,10 +431,9 @@ class WhatsAppSearchViewState extends SearchViewState {
               children: [
                 IconButton(
                   onPressed: widget.showEmojiView,
-                  color: widget.config.searchViewConfig.buttonColor,
-                  icon: Icon(
+                  color: widget.config.searchViewConfig.buttonIconColor,
+                  icon: const Icon(
                     Icons.arrow_back,
-                    color: widget.config.searchViewConfig.buttonIconColor,
                     size: 20.0,
                   ),
                 ),

diff --git a/lib/src/search_view/default_search_view.dart b/lib/src/search_view/default_search_view.dart
@@ -30,6 +30,7 @@ class DefaultSearchViewState extends SearchViewState {
           mainAxisSize: MainAxisSize.min,
           children: [
             Material(
+              color: Colors.transparent,
               child: SizedBox(
                 height: emojiBoxSize + 8.0,
                 child: ListView.builder(
@@ -52,19 +53,20 @@ class DefaultSearchViewState extends SearchViewState {
                   onPressed: () {
                     widget.showEmojiView();
                   },
-                  color: widget.config.searchViewConfig.buttonColor,
-                  icon: Icon(
+                  color: widget.config.searchViewConfig.buttonIconColor,
+                  icon: const Icon(
                     Icons.arrow_back,
-                    color: widget.config.searchViewConfig.buttonIconColor,
                   ),
                 ),
                 Expanded(
                   child: TextField(
                     onChanged: onTextInputChanged,
                     focusNode: focusNode,
+                    style: widget.config.searchViewConfig.inputTextStyle,
                     decoration: InputDecoration(
                       border: InputBorder.none,
                       hintText: widget.config.searchViewConfig.hintText,
+                      hintStyle: widget.config.searchViewConfig.hintTextStyle,
                       contentPadding:
                           const EdgeInsets.symmetric(horizontal: 16),
                     ),

diff --git a/lib/src/search_view/search_view_config.dart b/lib/src/search_view/search_view_config.dart
@@ -13,24 +13,28 @@ class SearchViewConfig {
   /// Constructor
   const SearchViewConfig({
     this.backgroundColor = const Color(0xFFEBEFF2),
-    this.buttonColor = Colors.transparent,
     this.buttonIconColor = Colors.black26,
+    this.inputTextStyle,
     this.hintText = 'Search',
+    this.hintTextStyle,
     this.customSearchView,
   });
 
   /// Background color of search bar
   final Color backgroundColor;
 
-  /// Fill color of hide search view button
-  final Color buttonColor;
-
   /// Icon color of hide search view button
   final Color buttonIconColor;
 
+  /// Inpit text style
+  final TextStyle? inputTextStyle;
+
   /// Custom hint text
   final String? hintText;
 
+  /// Custom hint text style
+  final TextStyle? hintTextStyle;
+
   /// Custom search bar
   /// Hot reload is not supported
   final SearchViewBuilder? customSearchView;
@@ -39,15 +43,17 @@ class SearchViewConfig {
   bool operator ==(other) {
     return (other is SearchViewConfig) &&
         other.backgroundColor == backgroundColor &&
-        other.buttonColor == buttonColor &&
         other.buttonIconColor == buttonIconColor &&
-        other.hintText == hintText;
+        other.hintText == hintText &&
+        other.hintTextStyle == hintTextStyle &&
+        other.inputTextStyle == inputTextStyle;
   }
 
   @override
   int get hashCode =>
       backgroundColor.hashCode ^
-      buttonColor.hashCode ^
       buttonIconColor.hashCode ^
-      hintText.hashCode;
+      hintText.hashCode ^
+      hintTextStyle.hashCode ^
+      inputTextStyle.hashCode;
 }