feat: ✨Added configuration for emoji picker sheet

- Added emojiPickerSheetConfig for configuration of emoji picker modal sheet.
SimformSolutionsPvtLtd · May 20, 2024 · a2dee7e · a2dee7e
1 parent aeb843f
commit a2dee7e
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 29 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [1.3.2] (Unreleased)
 
+* **Fix**: [160](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/160) Added
+  configuration for emoji picker sheet.
 * **Fix**: [130](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/130) Added
   report button for receiver message and update onMoreTap, onReportTap callback.
 * **Fix**: [126](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/126) Added

diff --git a/README.md b/README.md
@@ -512,6 +512,24 @@ ChatView(
 )
 ```
 
+22. Added `emojiPickerSheetConfig` for configuration of emoji picker sheet.
+
+```dart
+ChatView(
+   ...
+      emojiPickerSheetConfig: const Config(
+        columns: 7,
+        emojiSizeMax: 32
+        initCategory: Category.RECENT,
+        bgColor: Colors.white,
+        recentTabBehavior: RecentTabBehavior.NONE,
+        recentsLimit: 28,
+      ),
+        
+  ...
+ 
+)
+```
 
 
 ## How to use

diff --git a/lib/chatview.dart b/lib/chatview.dart
@@ -32,3 +32,4 @@ export 'package:audio_waveforms/audio_waveforms.dart'
     show WaveStyle, PlayerWaveStyle;
 export 'src/models/receipts_widget_config.dart';
 export 'src/extensions/extensions.dart' show MessageTypes;
+export'package:emoji_picker_flutter/emoji_picker_flutter.dart';
diff --git a/lib/src/widgets/chat_list_widget.dart b/lib/src/widgets/chat_list_widget.dart
@@ -52,6 +52,7 @@ class ChatListWidget extends StatefulWidget {
     this.isLastPage,
     this.onChatListTap,
     this.chatTextFieldTopPadding = 0,
+    this.emojiPickerSheetConfig,
   }) : super(key: key);
 
   /// Provides controller for accessing few function for running chat.
@@ -112,6 +113,9 @@ class ChatListWidget extends StatefulWidget {
   /// Provides top padding of chat text field
   final double chatTextFieldTopPadding;
 
+  /// Configuration for emoji picker sheet
+  final Config? emojiPickerSheetConfig;
+
   @override
   State<ChatListWidget> createState() => _ChatListWidgetState();
 }
@@ -233,6 +237,7 @@ class _ChatListWidgetState extends State<ChatListWidget>
                       reactionPopupConfig: widget.reactionPopupConfig,
                       onTap: _onChatListTap,
                       showPopUp: showPopupValue,
+                      emojiPickerSheetConfig: widget.emojiPickerSheetConfig,
                     ),
                 ],
               );

diff --git a/lib/src/widgets/chat_view.dart b/lib/src/widgets/chat_view.dart
@@ -55,6 +55,7 @@ class ChatView extends StatefulWidget {
     ChatViewStateConfiguration? chatViewStateConfig,
     this.featureActiveConfig = const FeatureActiveConfig(),
     this.chatTextFieldTopPadding = 0,
+    this.emojiPickerSheetConfig,
   })  : chatBackgroundConfig =
             chatBackgroundConfig ?? const ChatBackgroundConfiguration(),
         chatViewStateConfig =
@@ -141,6 +142,9 @@ class ChatView extends StatefulWidget {
   /// Provides top padding of chat text field
   final double chatTextFieldTopPadding;
 
+  /// Configuration for emoji picker sheet
+  final Config? emojiPickerSheetConfig;
+
   @override
   State<ChatView> createState() => _ChatViewState();
 }
@@ -256,6 +260,7 @@ class _ChatViewState extends State<ChatView>
                               ?.assignReplyMessage(message),
                           chatTextFieldTopPadding:
                               widget.chatTextFieldTopPadding,
+                          emojiPickerSheetConfig: widget.emojiPickerSheetConfig,
                         );
                       },
                     ),

diff --git a/lib/src/widgets/emoji_picker_widget.dart b/lib/src/widgets/emoji_picker_widget.dart
@@ -29,20 +29,27 @@ import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
 import '../values/typedefs.dart';
 
 class EmojiPickerWidget extends StatelessWidget {
-  const EmojiPickerWidget({Key? key, required this.onSelected})
-      : super(key: key);
+  const EmojiPickerWidget({
+    Key? key,
+    required this.onSelected,
+    this.emojiPickerSheetConfig,
+  }) : super(key: key);
 
   /// Provides callback when user selects emoji.
   final StringCallback onSelected;
 
+  /// Configuration for emoji picker sheet
+  final Config? emojiPickerSheetConfig;
+
   @override
   Widget build(BuildContext context) {
     final size = MediaQuery.sizeOf(context);
     return Container(
       padding: const EdgeInsets.only(top: 10, left: 15, right: 15),
-      decoration: const BoxDecoration(
-        color: Colors.white,
-        borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
+      decoration: BoxDecoration(
+        color: emojiPickerSheetConfig?.emojiViewConfig.backgroundColor ??
+            Colors.white,
+        borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
       ),
       height: size.height * 0.6,
       width: size.width,
@@ -61,26 +68,28 @@ class EmojiPickerWidget extends StatelessWidget {
             child: EmojiPicker(
               onEmojiSelected: (Category? category, Emoji emoji) =>
                   onSelected(emoji.emoji),
-              config: Config(
-                emojiViewConfig: EmojiViewConfig(
-                  columns: 7,
-                  emojiSizeMax: 32 * ((!kIsWeb && Platform.isIOS) ? 1.30 : 1.0),
-                  recentsLimit: 28,
-                  backgroundColor: Colors.white,
-                ),
-                searchViewConfig: const SearchViewConfig(
-                  buttonIconColor: Colors.black,
-                ),
-                categoryViewConfig: const CategoryViewConfig(
-                  initCategory: Category.RECENT,
-                  recentTabBehavior: RecentTabBehavior.NONE,
-                ),
-                bottomActionBarConfig: const BottomActionBarConfig(
-                  backgroundColor: Colors.white,
-                  buttonIconColor: Colors.black,
-                  buttonColor: Colors.white,
-                ),
-              ),
+              config: emojiPickerSheetConfig ??
+                  Config(
+                    emojiViewConfig: EmojiViewConfig(
+                      columns: 7,
+                      emojiSizeMax:
+                          32 * ((!kIsWeb && Platform.isIOS) ? 1.30 : 1.0),
+                      recentsLimit: 28,
+                      backgroundColor: Colors.white,
+                    ),
+                    searchViewConfig: const SearchViewConfig(
+                      buttonIconColor: Colors.black,
+                    ),
+                    categoryViewConfig: const CategoryViewConfig(
+                      initCategory: Category.RECENT,
+                      recentTabBehavior: RecentTabBehavior.NONE,
+                    ),
+                    bottomActionBarConfig: const BottomActionBarConfig(
+                      backgroundColor: Colors.white,
+                      buttonIconColor: Colors.black,
+                      buttonColor: Colors.white,
+                    ),
+                  ),
             ),
           ),
         ],

diff --git a/lib/src/widgets/emoji_row.dart b/lib/src/widgets/emoji_row.dart
@@ -19,6 +19,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
 import 'package:flutter/material.dart';
 import 'package:chatview/src/models/reaction_popup_configuration.dart';
 import 'package:chatview/src/utils/constants/constants.dart';
@@ -31,6 +32,7 @@ class EmojiRow extends StatelessWidget {
     Key? key,
     required this.onEmojiTap,
     this.emojiConfiguration,
+    this.emojiPickerSheetConfig,
   }) : super(key: key);
 
   /// Provides callback when user taps on emoji in reaction pop-up.
@@ -49,6 +51,9 @@ class EmojiRow extends StatelessWidget {
     thumbsUp,
   ];
 
+  /// Configuration for emoji picker sheet
+  final Config? emojiPickerSheetConfig;
+
   @override
   Widget build(BuildContext context) {
     final emojiList = emojiConfiguration?.emojiList ?? _emojiUnicodes;
@@ -86,9 +91,12 @@ class EmojiRow extends StatelessWidget {
 
   void _showBottomSheet(BuildContext context) => showModalBottomSheet<void>(
         context: context,
-        builder: (context) => EmojiPickerWidget(onSelected: (emoji) {
-          Navigator.pop(context);
-          onEmojiTap(emoji);
-        }),
+        builder: (context) => EmojiPickerWidget(
+          emojiPickerSheetConfig: emojiPickerSheetConfig,
+          onSelected: (emoji) {
+            Navigator.pop(context);
+            onEmojiTap(emoji);
+          },
+        ),
       );
 }
diff --git a/lib/src/widgets/reaction_popup.dart b/lib/src/widgets/reaction_popup.dart
@@ -32,6 +32,7 @@ class ReactionPopup extends StatefulWidget {
     this.reactionPopupConfig,
     required this.onTap,
     required this.showPopUp,
+    this.emojiPickerSheetConfig,
   }) : super(key: key);
 
   /// Provides configuration of reaction pop-up appearance.
@@ -43,6 +44,9 @@ class ReactionPopup extends StatefulWidget {
   /// Represents should pop-up show or not.
   final bool showPopUp;
 
+  /// Configuration for emoji picker sheet
+  final Config? emojiPickerSheetConfig;
+
   @override
   ReactionPopupState createState() => ReactionPopupState();
 }
@@ -168,6 +172,7 @@ class ReactionPopupState extends State<ReactionPopup>
           }
         },
         emojiConfiguration: reactionPopupConfig?.emojiConfig,
+        emojiPickerSheetConfig: widget.emojiPickerSheetConfig,
       );
 
   void refreshWidget({