Improve customization for backspace and search button (#210)

Fintasys · Aug 14, 2024 · 9e20406 · 9e20406
1 parent 7281667
commit 9e20406
Show file tree

Hide file tree

Showing 19 changed files with 117 additions and 36 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
+## 3.0.0
+- Upgrade to Flutter `3.24.0`, Dart `3.4.0` and dependencies e.g. `web: 1.0.0` (thx to @diegotori)
+- 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
+
 ## 2.2.0
 
 - Downgrade Kotlin to 1.7.10

diff --git a/README.md b/README.md
@@ -70,7 +70,7 @@ All examples can be found [here](https://github.com/Fintasys/emoji_picker_flutte
 
    <img src="https://raw.githubusercontent.com/Fintasys/emoji_picker_flutter/41c3e6d2cfe69375e263f42cfe06dbad7936bde1/screenshot/example_default_android.png" width="300">
 
-2. Custom Font (Display all emoji correctly in the style of the font, additional ~15mb e.g. with Google Fonts)
+2. Custom Font (Display all emoji correctly in the style of the font, additional ~15mb e.g. with Google Fonts) - Might causes performance issues on iOS (see [issue 205](https://github.com/Fintasys/emoji_picker_flutter/issues/205))
 
    <img src="https://raw.githubusercontent.com/Fintasys/emoji_picker_flutter/version-2.0/screenshot/example_custom_font_android.png" width="300"> <img src="https://raw.githubusercontent.com/Fintasys/emoji_picker_flutter/version-2.0/screenshot/example_custom_font_android_2.png" width="300">
 
@@ -89,6 +89,8 @@ All examples can be found [here](https://github.com/Fintasys/emoji_picker_flutte
 | checkPlatformCompatibility | Whether to filter out glyphs that platform cannot render with the default font (Android).                                                       | true                          |
 | emojiSet                   | Custom emoji set, can be built based on `defaultEmojiSet` provided by the library.                                                              | null                          |
 | emojiTextStyle             | Text style to apply to individual emoji icons. Can be used to define custom emoji font either with GoogleFonts library or bundled with the app. | null                          |
+| customBackspaceIcon             | Custom Icon for Backspace button | null                          |
+| customSearchIcon             | Custom Icon for Search button | null                          |
 | emojiViewConfig            | Emoji view config                                                                                                                               | const EmojiViewConfig()       |
 | skinToneConfig             | Skin tone config                                                                                                                                | const SkinToneConfig          |
 | categoryViewConfig         | Category view config                                                                                                                            | const CategoryViewConfig      |
@@ -127,7 +129,7 @@ All examples can be found [here](https://github.com/Fintasys/emoji_picker_flutte
 | tabIndicatorAnimDuration | Duration of tab indicator to animate to next category                                                      | Duration(milliseconds: 300) |
 | initCategory             | The initial Category that will be selected                                                                 | Category.RECENT             |
 | recentTabBehavior        | Show extra tab with recently / popular used emoji                                                          | RecentTabBehavior.RECENT    |
-| showBackspaceButton      | Show backspace button in category view                                                                     | false                       |
+| extraTab      | Add extra tab to category tab bar for backspace or search button                                                                    | CategoryExtraTab.NONE                       |
 | backgroundColor          | Background color of category tab bar                                                                       | const Color(0xFFEBEFF2)     |
 | indicatorColor           | The color of the category indicator                                                                        | Colors.blue                 |
 | iconColor                | The color of the category icons                                                                            | Colors.grey                 |
@@ -159,7 +161,7 @@ All examples can be found [here](https://github.com/Fintasys/emoji_picker_flutte
 
 ## Backspace-Button
 
-Backspace button is enabled by default on the bottom action bar. If you prefer to have the backspace button inside the category, you can enable it inside the `CategoryViewConfig`.
+Backspace button is enabled by default on the bottom action bar. If you prefer to have the backspace button inside the category tab bar, you can enable it inside the `CategoryViewConfig` and then `extraTab` to `CategoryExtraTab.BACKSPACE`.
 You can listen to the Backspace tap event by registering a callback inside `onBackspacePressed: () { }`. This will make it easier for your user to remove an added Emoji without showing the keyboard. Check out the example for more details about usage.
 
 Bottom Backspace Button

diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -33,10 +33,10 @@ EXTERNAL SOURCES:
 SPEC CHECKSUMS:
   emoji_picker_flutter: fe2e6151c5b548e975d546e6eeb567daf0962a58
   Flutter: e0871f40cf51350855a761d2e70bf5af5b9b5de7
-  integration_test: 13825b8a9334a850581300559b8839134b124670
-  path_provider_foundation: 29f094ae23ebbca9d3d0cec13889cd9060c0e943
-  shared_preferences_foundation: 5b919d13b803cadd15ed2dc053125c68730e5126
+  integration_test: 252f60fa39af5e17c3aa9899d35d908a0721b573
+  path_provider_foundation: 2b6b4c569c0fb62ec74538f866245ac84301af46
+  shared_preferences_foundation: fcdcbc04712aee1108ac7fda236f363274528f78
 
 PODFILE CHECKSUM: 02cd373d6569789200c1010c74f86088d8761163
 
-COCOAPODS: 1.14.3
+COCOAPODS: 1.15.2
diff --git a/example/ios/Runner.xcodeproj/project.pbxproj b/example/ios/Runner.xcodeproj/project.pbxproj
@@ -215,7 +215,7 @@
 			isa = PBXProject;
 			attributes = {
 				BuildIndependentTargetsInParallel = YES;
-				LastUpgradeCheck = 1430;
+				LastUpgradeCheck = 1510;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					331C8080294A63A400263BE5 = {

diff --git a/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme b/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1430"
+   LastUpgradeVersion = "1510"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"

diff --git a/example/ios/Runner/AppDelegate.swift b/example/ios/Runner/AppDelegate.swift
@@ -1,7 +1,7 @@
 import UIKit
 import Flutter
 
-@UIApplicationMain
+@main
 @objc class AppDelegate: FlutterAppDelegate {
   override func application(
     _ application: UIApplication,

diff --git a/example/lib/main_whatsapp.dart b/example/lib/main_whatsapp.dart
@@ -298,22 +298,29 @@ class WhatsAppCategoryViewState extends State<WhatsAppCategoryView>
               closeSkinToneOverlay,
             ),
           ),
-          _buildBackspaceButton(),
+          _buildExtraTab(widget.config.categoryViewConfig.extraTab),
         ],
       ),
     );
   }
 
-  Widget _buildBackspaceButton() {
-    if (widget.config.categoryViewConfig.showBackspaceButton) {
+  Widget _buildExtraTab(extraTab) {
+    if (extraTab == CategoryExtraTab.BACKSPACE) {
       return BackspaceButton(
         widget.config,
         widget.state.onBackspacePressed,
         widget.state.onBackspaceLongPressed,
         widget.config.categoryViewConfig.backspaceColor,
       );
+    } else if (extraTab == CategoryExtraTab.SEARCH) {
+      return SearchButton(
+        widget.config,
+        widget.state.onShowSearchView,
+        widget.config.categoryViewConfig.iconColor,
+      );
+    } else {
+      return const SizedBox.shrink();
     }
-    return const SizedBox.shrink();
   }
 }
 

diff --git a/example/pubspec.lock b/example/pubspec.lock
@@ -55,7 +55,7 @@ packages:
       path: ".."
       relative: true
     source: path
-    version: "2.2.0"
+    version: "3.0.0"
   fake_async:
     dependency: transitive
     description:

diff --git a/lib/emoji_picker_flutter.dart b/lib/emoji_picker_flutter.dart
@@ -4,6 +4,7 @@ export 'package:emoji_picker_flutter/src/bottom_action_bar/bottom_action_bar.dar
 export 'package:emoji_picker_flutter/src/bottom_action_bar/bottom_action_bar_config.dart';
 export 'package:emoji_picker_flutter/src/bottom_action_bar/default_bottom_action_bar.dart';
 export 'package:emoji_picker_flutter/src/category_view/category_emoji.dart';
+export 'package:emoji_picker_flutter/src/category_view/category_extra_tab.dart';
 export 'package:emoji_picker_flutter/src/category_view/category_icon.dart';
 export 'package:emoji_picker_flutter/src/category_view/category_icons.dart';
 export 'package:emoji_picker_flutter/src/category_view/category_view.dart';
@@ -33,3 +34,4 @@ export 'package:emoji_picker_flutter/src/skin_tones/skin_tone_overlay.dart';
 export 'package:emoji_picker_flutter/src/skin_tones/triangle_decoration.dart';
 export 'package:emoji_picker_flutter/src/widgets/backspace_button.dart';
 export 'package:emoji_picker_flutter/src/widgets/emoji_cell.dart';
+export 'package:emoji_picker_flutter/src/widgets/search_button.dart';
diff --git a/lib/src/bottom_action_bar/default_bottom_action_bar.dart b/lib/src/bottom_action_bar/default_bottom_action_bar.dart
@@ -31,12 +31,10 @@ class _DefaultBottomActionBarState extends State<DefaultBottomActionBar> {
     if (widget.config.bottomActionBarConfig.showSearchViewButton) {
       return CircleAvatar(
         backgroundColor: widget.config.bottomActionBarConfig.buttonColor,
-        child: IconButton(
-          onPressed: widget.showSearchView,
-          icon: Icon(
-            Icons.search,
-            color: widget.config.bottomActionBarConfig.buttonIconColor,
-          ),
+        child: SearchButton(
+          widget.config,
+          widget.showSearchView,
+          widget.config.bottomActionBarConfig.buttonIconColor,
         ),
       );
     }

diff --git a/lib/src/category_view/category_extra_tab.dart b/lib/src/category_view/category_extra_tab.dart
@@ -0,0 +1,11 @@
+/// Behavior of extra tab
+enum CategoryExtraTab {
+  /// Don't show extra tab
+  NONE,
+
+  /// Display backspace button in tab bar
+  BACKSPACE,
+
+  /// Display search button in tab bar
+  SEARCH,
+}
diff --git a/lib/src/category_view/category_view_config.dart b/lib/src/category_view/category_view_config.dart
@@ -17,7 +17,7 @@ class CategoryViewConfig {
     this.tabIndicatorAnimDuration = kTabScrollDuration,
     this.initCategory = Category.RECENT,
     this.recentTabBehavior = RecentTabBehavior.RECENT,
-    this.showBackspaceButton = false,
+    this.extraTab = CategoryExtraTab.NONE,
     this.backgroundColor = const Color(0xFFEBEFF2),
     this.indicatorColor = Colors.blue,
     this.iconColor = Colors.grey,
@@ -41,8 +41,8 @@ class CategoryViewConfig {
   /// Behavior of Recent Tab (Recent, Popular)
   final RecentTabBehavior recentTabBehavior;
 
-  /// Show Backspace button
-  final bool showBackspaceButton;
+  /// Extra tab button in category tab bar
+  final CategoryExtraTab? extraTab;
 
   /// Background color of TabBar
   final Color backgroundColor;
@@ -59,7 +59,7 @@ class CategoryViewConfig {
   /// The color of the backspace icon button
   final Color backspaceColor;
 
-  /// Divider color between TabBar and emoji's
+  /// Divider color between TabBar and emoji's, use Colors.transparent to remove
   final Color? dividerColor;
 
   /// Determines the icon to display for each [Category]
@@ -76,7 +76,7 @@ class CategoryViewConfig {
         other.tabIndicatorAnimDuration == tabIndicatorAnimDuration &&
         other.initCategory == initCategory &&
         other.recentTabBehavior == recentTabBehavior &&
-        other.showBackspaceButton == showBackspaceButton &&
+        other.extraTab == extraTab &&
         other.backgroundColor == backgroundColor &&
         other.indicatorColor == indicatorColor &&
         other.iconColor == iconColor &&
@@ -92,7 +92,7 @@ class CategoryViewConfig {
       tabIndicatorAnimDuration.hashCode ^
       initCategory.hashCode ^
       recentTabBehavior.hashCode ^
-      showBackspaceButton.hashCode ^
+      extraTab.hashCode ^
       backgroundColor.hashCode ^
       indicatorColor.hashCode ^
       iconColor.hashCode ^

diff --git a/lib/src/category_view/default_category_view.dart b/lib/src/category_view/default_category_view.dart
@@ -33,21 +33,28 @@ class DefaultCategoryViewState extends CategoryViewState {
               closeSkinToneOverlay,
             ),
           ),
-          _buildBackspaceButton(),
+          _buildExtraTab(widget.config.categoryViewConfig.extraTab),
         ],
       ),
     );
   }
 
-  Widget _buildBackspaceButton() {
-    if (widget.config.categoryViewConfig.showBackspaceButton) {
+  Widget _buildExtraTab(extraTab) {
+    if (extraTab == CategoryExtraTab.BACKSPACE) {
       return BackspaceButton(
         widget.config,
         widget.state.onBackspacePressed,
         widget.state.onBackspaceLongPressed,
         widget.config.categoryViewConfig.backspaceColor,
       );
+    } else if (extraTab == CategoryExtraTab.SEARCH) {
+      return SearchButton(
+        widget.config,
+        widget.state.onShowSearchView,
+        widget.config.categoryViewConfig.iconColor,
+      );
+    } else {
+      return const SizedBox.shrink();
     }
-    return const SizedBox.shrink();
   }
 }
diff --git a/lib/src/config.dart b/lib/src/config.dart
@@ -13,6 +13,8 @@ class Config {
     this.checkPlatformCompatibility = true,
     this.emojiSet = defaultEmojiSet,
     this.emojiTextStyle,
+    this.customBackspaceIcon,
+    this.customSearchIcon,
     this.emojiViewConfig = const EmojiViewConfig(),
     this.skinToneConfig = const SkinToneConfig(),
     this.categoryViewConfig = const CategoryViewConfig(),
@@ -42,6 +44,12 @@ class Config {
   /// This has priority over [EmojiViewConfig.emojiSizeMax] if font size is set.
   final TextStyle? emojiTextStyle;
 
+  ///  Custom backspace icon
+  final Icon? customBackspaceIcon;
+
+  /// Custom search icon
+  final Icon? customSearchIcon;
+
   /// Emoji view config
   final EmojiViewConfig emojiViewConfig;
 
@@ -64,6 +72,8 @@ class Config {
         other.checkPlatformCompatibility == checkPlatformCompatibility &&
         other.emojiSet == emojiSet &&
         other.emojiTextStyle == emojiTextStyle &&
+        other.customBackspaceIcon == customBackspaceIcon &&
+        other.customSearchIcon == customSearchIcon &&
         other.emojiViewConfig == emojiViewConfig &&
         other.skinToneConfig == skinToneConfig &&
         other.bottomActionBarConfig == bottomActionBarConfig &&
@@ -76,6 +86,8 @@ class Config {
       checkPlatformCompatibility.hashCode ^
       emojiSet.hashCode ^
       (emojiTextStyle?.hashCode ?? 0) ^
+      customBackspaceIcon.hashCode ^
+      customSearchIcon.hashCode ^
       categoryViewConfig.hashCode ^
       emojiViewConfig.hashCode ^
       skinToneConfig.hashCode ^

diff --git a/lib/src/emoji_picker.dart b/lib/src/emoji_picker.dart
@@ -371,6 +371,7 @@ class EmojiPickerState extends State<EmojiPicker> {
       _onEmojiSelected,
       _onBackspacePressed,
       _onBackspaceLongPressed,
+      _showSearchView,
     );
     if (mounted) {
       setState(() {

diff --git a/lib/src/emoji_view_state.dart b/lib/src/emoji_view_state.dart
@@ -1,4 +1,5 @@
 import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
+import 'package:flutter/material.dart';
 
 /// State that holds current emoji data
 class EmojiViewState {
@@ -8,6 +9,7 @@ class EmojiViewState {
     this.onEmojiSelected,
     this.onBackspacePressed,
     this.onBackspaceLongPressed,
+    this.onShowSearchView,
   );
 
   /// List of all category including their emoji
@@ -21,4 +23,7 @@ class EmojiViewState {
 
   /// Callback when long pressed on backspace
   final OnBackspaceLongPressed onBackspaceLongPressed;
+
+  /// Callback when pressed on search
+  final VoidCallback onShowSearchView;
 }
diff --git a/lib/src/widgets/backspace_button.dart b/lib/src/widgets/backspace_button.dart
@@ -38,10 +38,11 @@ class _BackspaceButtonState extends State<BackspaceButton> {
         onLongPressEnd: (_) => _stopOnBackspacePressedCallback(),
         child: IconButton(
           padding: const EdgeInsets.only(bottom: 2),
-          icon: Icon(
-            Icons.backspace,
-            color: widget.iconColor,
-          ),
+          icon: widget.config.customBackspaceIcon ??
+              Icon(
+                Icons.backspace,
+                color: widget.iconColor,
+              ),
           onPressed: () {
             widget.onBackspacePressed?.call();
           },

diff --git a/lib/src/widgets/search_button.dart b/lib/src/widgets/search_button.dart
@@ -0,0 +1,30 @@
+import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
+import 'package:flutter/material.dart';
+
+/// Search Button Widget
+class SearchButton extends StatelessWidget {
+  /// Constructor
+  const SearchButton(this.config, this.showSearchView, this.buttonIconColor,
+      {super.key});
+
+  /// Config
+  final Config config;
+
+  /// Show search view callback
+  final VoidCallback showSearchView;
+
+  /// Button icon color
+  final Color buttonIconColor;
+
+  @override
+  Widget build(BuildContext context) {
+    return IconButton(
+      onPressed: showSearchView,
+      icon: config.customSearchIcon ??
+          Icon(
+            Icons.search,
+            color: buttonIconColor,
+          ),
+    );
+  }
+}
diff --git a/pubspec.yaml b/pubspec.yaml
@@ -1,6 +1,6 @@
 name: emoji_picker_flutter
 description: A Flutter package that provides an Emoji picker widget with 1500+ emojis in 8 categories.
-version: 2.2.0
+version: 3.0.0
 homepage: https://github.com/Fintasys/emoji_picker_flutter
 
 environment: