feat: add config option to reorder items in emoji picker

example/lib/main.dart

@@ -109,6 +109,11 @@ class MyAppState extends State<MyApp> {
                   config: Config(
                     height: 256,
                     checkPlatformCompatibility: true,
+                    itemsOrderConfig: const ItemsOrderConfig(
+                      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,
+                    itemsOrderConfig: const ItemsOrderConfig(
+                      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,
+                          itemsOrderConfig: const ItemsOrderConfig(
+                            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

@@ -24,6 +24,7 @@ export 'package:emoji_picker_flutter/src/emoji_view/emoji_container.dart';
 export 'package:emoji_picker_flutter/src/emoji_view/emoji_picker_view.dart';
 export 'package:emoji_picker_flutter/src/emoji_view/emoji_view_config.dart';
 export 'package:emoji_picker_flutter/src/emoji_view_state.dart';
+export 'package:emoji_picker_flutter/src/items_order_config.dart';
 export 'package:emoji_picker_flutter/src/recent_emoji.dart';
 export 'package:emoji_picker_flutter/src/search_view/default_search_view.dart';
 export 'package:emoji_picker_flutter/src/search_view/search_view.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.itemsOrderConfig = const ItemsOrderConfig(
+      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 ItemsOrderConfig itemsOrderConfig;
+
   /// Emoji view config
   final EmojiViewConfig emojiViewConfig;
 
@@ -68,7 +72,7 @@ class Config {
   @override
   bool operator ==(other) {
     return (other is Config) &&
-        other.swapCategoryAndBottomBar == swapCategoryAndBottomBar &&
+        other.itemsOrderConfig == itemsOrderConfig &&
         other.checkPlatformCompatibility == checkPlatformCompatibility &&
         other.emojiSet == emojiSet &&
         other.emojiTextStyle == emojiTextStyle &&
@@ -82,7 +86,7 @@ class Config {
 
   @override
   int get hashCode =>
-      swapCategoryAndBottomBar.hashCode ^
+      itemsOrderConfig.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.itemsOrderConfig.top,
+              widget.config.itemsOrderConfig.middle,
+              widget.config.itemsOrderConfig.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/items_order_config.dart

@@ -0,0 +1,43 @@
+/// Items order config
+class ItemsOrderConfig {
+  /// Constructor
+  const ItemsOrderConfig({
+    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 ItemsOrderConfig) &&
+        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,
+}