diff --git a/README.md b/README.md index 431d179..d55cee6 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,11 @@ EmojiPicker( ? 1.20 : 1.0), ), - swapCategoryAndBottomBar: false, + viewOrderConfig: const ViewOrderConfig( + top: EmojiPickerItem.categoryBar, + middle: EmojiPickerItem.emojiView, + bottom: EmojiPickerItem.searchBar, + ), skinToneConfig: const SkinToneConfig(), categoryViewConfig: const CategoryViewConfig(), bottomActionBarConfig: const BottomActionBarConfig(), @@ -85,7 +89,7 @@ All examples can be found [here](https://github.com/Fintasys/emoji_picker_flutte | property | description | default | | -------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | | height | Height of Emoji Picker | 256 | -| swapCategoryAndBottomBar | Swap the category view and bottom bar (category bottom and bottom bar top) | false | +| viewOrderConfig | The exact order in which category view, emoji view and bottom bar appear | false | | 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 | diff --git a/example/lib/main.dart b/example/lib/main.dart index b7300be..62addc2 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -109,6 +109,11 @@ class MyAppState extends State { config: Config( height: 256, checkPlatformCompatibility: true, + viewOrderConfig: const ViewOrderConfig( + top: EmojiPickerItem.categoryBar, + middle: EmojiPickerItem.emojiView, + bottom: EmojiPickerItem.searchBar, + ), emojiViewConfig: EmojiViewConfig( // Issue: https://github.com/flutter/flutter/issues/28894 emojiSizeMax: 28 * @@ -117,7 +122,6 @@ class MyAppState extends State { ? 1.2 : 1.0), ), - swapCategoryAndBottomBar: false, skinToneConfig: const SkinToneConfig(), categoryViewConfig: const CategoryViewConfig(), bottomActionBarConfig: const BottomActionBarConfig(), diff --git a/example/lib/main_custom_font.dart b/example/lib/main_custom_font.dart index fec9888..c4b005d 100644 --- a/example/lib/main_custom_font.dart +++ b/example/lib/main_custom_font.dart @@ -134,9 +134,13 @@ class MyAppState extends State { config: Config( height: 256, checkPlatformCompatibility: true, + viewOrderConfig: const ViewOrderConfig( + top: EmojiPickerItem.categoryBar, + middle: EmojiPickerItem.emojiView, + bottom: EmojiPickerItem.searchBar, + ), emojiTextStyle: _textStyle, emojiViewConfig: const EmojiViewConfig(), - swapCategoryAndBottomBar: false, skinToneConfig: const SkinToneConfig(), categoryViewConfig: const CategoryViewConfig(), bottomActionBarConfig: const BottomActionBarConfig(), diff --git a/example/lib/main_whatsapp.dart b/example/lib/main_whatsapp.dart index eec64b2..e4337e8 100644 --- a/example/lib/main_whatsapp.dart +++ b/example/lib/main_whatsapp.dart @@ -191,11 +191,15 @@ class MyAppState extends State { config: Config( height: 256, checkPlatformCompatibility: true, + viewOrderConfig: const ViewOrderConfig( + top: EmojiPickerItem.categoryBar, + middle: EmojiPickerItem.emojiView, + bottom: EmojiPickerItem.searchBar, + ), emojiTextStyle: _textStyle, emojiViewConfig: const EmojiViewConfig( backgroundColor: Colors.white, ), - swapCategoryAndBottomBar: true, skinToneConfig: const SkinToneConfig(), categoryViewConfig: CategoryViewConfig( backgroundColor: Colors.white, diff --git a/lib/emoji_picker_flutter.dart b/lib/emoji_picker_flutter.dart index 9f5cf85..e923605 100644 --- a/lib/emoji_picker_flutter.dart +++ b/lib/emoji_picker_flutter.dart @@ -32,6 +32,7 @@ export 'package:emoji_picker_flutter/src/skin_tones/emoji_skin_tones.dart'; export 'package:emoji_picker_flutter/src/skin_tones/skin_tone_config.dart'; 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/view_order_config.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/config.dart b/lib/src/config.dart index 13392be..28c21db 100644 --- a/lib/src/config.dart +++ b/lib/src/config.dart @@ -9,12 +9,16 @@ class Config { /// Constructor const Config({ this.height = 256, - this.swapCategoryAndBottomBar = false, this.checkPlatformCompatibility = true, this.emojiSet = defaultEmojiSet, this.emojiTextStyle, this.customBackspaceIcon, this.customSearchIcon, + this.viewOrderConfig = const ViewOrderConfig( + top: EmojiPickerItem.categoryBar, + middle: EmojiPickerItem.emojiView, + bottom: EmojiPickerItem.searchBar, + ), this.emojiViewConfig = const EmojiViewConfig(), this.skinToneConfig = const SkinToneConfig(), this.categoryViewConfig = const CategoryViewConfig(), @@ -25,9 +29,6 @@ class Config { /// Max Height of the Emoji's view final double height; - /// Swap the category view and bottom bar (category bottom and bottom bar top) - final bool swapCategoryAndBottomBar; - /// Verify that emoji glyph is supported by the platform (Android only) final bool checkPlatformCompatibility; @@ -50,6 +51,9 @@ class Config { /// Custom search icon final Icon? customSearchIcon; + /// Config for items in order to show in UI + final ViewOrderConfig viewOrderConfig; + /// Emoji view config final EmojiViewConfig emojiViewConfig; @@ -68,7 +72,7 @@ class Config { @override bool operator ==(other) { return (other is Config) && - other.swapCategoryAndBottomBar == swapCategoryAndBottomBar && + other.viewOrderConfig == viewOrderConfig && other.checkPlatformCompatibility == checkPlatformCompatibility && other.emojiSet == emojiSet && other.emojiTextStyle == emojiTextStyle && @@ -82,7 +86,7 @@ class Config { @override int get hashCode => - swapCategoryAndBottomBar.hashCode ^ + viewOrderConfig.hashCode ^ checkPlatformCompatibility.hashCode ^ emojiSet.hashCode ^ (emojiTextStyle?.hashCode ?? 0) ^ diff --git a/lib/src/emoji_view/default_emoji_picker_view.dart b/lib/src/emoji_view/default_emoji_picker_view.dart index 855ab4c..6590d79 100644 --- a/lib/src/emoji_view/default_emoji_picker_view.dart +++ b/lib/src/emoji_view/default_emoji_picker_view.dart @@ -58,19 +58,24 @@ class _DefaultEmojiPickerViewState extends State buttonMode: widget.config.emojiViewConfig.buttonMode, child: Column( children: [ - // Category view or bottom search bar - widget.config.swapCategoryAndBottomBar - ? _buildBottomSearchBar() - : _buildCategoryView(), - - // Emoji view - _buildEmojiView(emojiSize, emojiBoxSize), - - // Bottom Search Bar or Category view - widget.config.swapCategoryAndBottomBar - ? _buildCategoryView() - : _buildBottomSearchBar(), - ], + widget.config.viewOrderConfig.top, + widget.config.viewOrderConfig.middle, + widget.config.viewOrderConfig.bottom, + ].map( + (item) { + switch (item) { + case EmojiPickerItem.categoryBar: + // Category view + return _buildCategoryView(); + case EmojiPickerItem.emojiView: + // Emoji view + return _buildEmojiView(emojiSize, emojiBoxSize); + case EmojiPickerItem.searchBar: + // Search Bar + return _buildBottomSearchBar(); + } + }, + ).toList(), ), ); }, diff --git a/lib/src/view_order_config.dart b/lib/src/view_order_config.dart new file mode 100644 index 0000000..48301f4 --- /dev/null +++ b/lib/src/view_order_config.dart @@ -0,0 +1,43 @@ +/// View order config +class ViewOrderConfig { + /// Constructor + const ViewOrderConfig({ + required this.top, + required this.middle, + required this.bottom, + }) : assert(!identical(top, middle) && + !identical(top, bottom) && + !identical(middle, bottom)); + + /// First item + final EmojiPickerItem top; + + /// Middle item + final EmojiPickerItem middle; + + /// Last item + final EmojiPickerItem bottom; + + @override + bool operator ==(other) { + return (other is ViewOrderConfig) && + other.top == top && + other.middle == middle && + other.bottom == bottom; + } + + @override + int get hashCode => top.hashCode ^ middle.hashCode ^ bottom.hashCode; +} + +/// Widgets shown in `EmojiPicker` view +enum EmojiPickerItem { + /// The tab bar to choose between different emoji categories + categoryBar, + + /// The area that shows emojis + emojiView, + + /// The search bar to search emojis + searchBar, +}