diff --git a/CHANGELOG.md b/CHANGELOG.md index fe8ca44..6dcae99 100644 --- 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 index 93d3423..0648a4c 100644 --- a/README.md +++ b/README.md @@ -70,7 +70,7 @@ All examples can be found [here](https://github.com/Fintasys/emoji_picker_flutte -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)) @@ -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 index b22869b..4d5ee68 100644 --- 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 index dbd937c..7d6867c 100644 --- 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 index 87131a0..8e3ca5d 100644 --- a/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme +++ b/example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme @@ -1,6 +1,6 @@ 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 index 03775dd..8a6a533 100644 --- 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 index 8c20df3..9f5cf85 100644 --- 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 index 4519453..4c13f45 100644 --- 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 { 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 new file mode 100644 index 0000000..5df1ee8 --- /dev/null +++ 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 index 70d3f51..f128f36 100644 --- 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 index c9308cf..dc03949 100644 --- 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 index efad031..13392be 100644 --- 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 index 01eae1c..8dd1df0 100644 --- a/lib/src/emoji_picker.dart +++ b/lib/src/emoji_picker.dart @@ -371,6 +371,7 @@ class EmojiPickerState extends State { _onEmojiSelected, _onBackspacePressed, _onBackspaceLongPressed, + _showSearchView, ); if (mounted) { setState(() { diff --git a/lib/src/emoji_view_state.dart b/lib/src/emoji_view_state.dart index 36ba999..8de20e6 100644 --- 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 index 2ef5883..e800bc5 100644 --- a/lib/src/widgets/backspace_button.dart +++ b/lib/src/widgets/backspace_button.dart @@ -38,10 +38,11 @@ class _BackspaceButtonState extends State { 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 new file mode 100644 index 0000000..393af23 --- /dev/null +++ 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 index 1147e40..3011955 100644 --- 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: