Add config option to reorder views in emoji picker (#215)

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                          |

example/lib/main.dart

@@ -109,6 +109,11 @@ class MyAppState extends State<MyApp> {
                   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<MyApp> {
                               ? 1.2
                               : 1.0),
                     ),
-                    swapCategoryAndBottomBar: false,
                     skinToneConfig: const SkinToneConfig(),
                     categoryViewConfig: const CategoryViewConfig(),
                     bottomActionBarConfig: const BottomActionBarConfig(),

example/lib/main_custom_font.dart

@@ -134,9 +134,13 @@ class MyAppState extends State<MyApp> {
                   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(),

example/lib/main_whatsapp.dart

@@ -191,11 +191,15 @@ class MyAppState extends State<MyApp> {
                         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,

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';

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) ^

lib/src/emoji_view/default_emoji_picker_view.dart

@@ -58,19 +58,24 @@ class _DefaultEmojiPickerViewState extends State<DefaultEmojiPickerView>
           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(),
           ),
         );
       },

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,
+}