Fix for ShellRoute issue (#161)

CHANGELOG.md

@@ -1,3 +1,7 @@
+## 1.6.3
+
+- Added new Config parameter `customSkinColorOverlayHorizontalOffset` to fix issue with SkinColorOverlay in ShellRoute or other horizontal adjustments
+
 ## 1.6.2
 
 - remove nullability from `OverlayState`

README.md

@@ -95,6 +95,7 @@ See the [demo](https://github.com/Fintasys/emoji_picker_flutter/blob/master/exam
 | 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    |
+| customSkinColorOverlayHorizontalOffset     | Custom horizontal offset for SkinColor Overlay. Try to assign `0.0` when overlay is not at the correct position  | null    |
 
 ## Backspace-Button
 You can add a Backspace-Button to the end category list by adding the callback method `onBackspacePressed: () { }` to the EmojiPicker-Widget. 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. Set it to null to hide the Backspace-Button.

lib/src/config.dart

@@ -42,6 +42,7 @@ class Config {
     this.checkPlatformCompatibility = true,
     this.emojiSet,
     this.emojiTextStyle,
+    this.customSkinColorOverlayHorizontalOffset,
   });
 
   /// Number of emojis per row
@@ -126,6 +127,12 @@ class Config {
   /// being filtered out.
   final TextStyle? emojiTextStyle;
 
+  /// Customize skin color overlay horizontal offset in case of ShellRoute or
+  /// other cases, when EmojiPicker is not aligned to the left border of the
+  /// screen.
+  /// Reference: https://github.com/Fintasys/emoji_picker_flutter/issues/148
+  final double? customSkinColorOverlayHorizontalOffset;
+
   /// Get Emoji size based on properties and screen width
   double getEmojiSize(double width) {
     final maxSize = width / columns;
@@ -185,7 +192,9 @@ class Config {
         other.replaceEmojiOnLimitExceed == replaceEmojiOnLimitExceed &&
         other.checkPlatformCompatibility == checkPlatformCompatibility &&
         other.emojiSet == emojiSet &&
-        other.emojiTextStyle == emojiTextStyle;
+        other.emojiTextStyle == emojiTextStyle &&
+        other.customSkinColorOverlayHorizontalOffset ==
+            customSkinColorOverlayHorizontalOffset;
   }
 
   @override
@@ -214,5 +223,6 @@ class Config {
       replaceEmojiOnLimitExceed.hashCode ^
       checkPlatformCompatibility.hashCode ^
       (emojiSet?.hashCode ?? 0) ^
-      (emojiTextStyle?.hashCode ?? 0);
+      (emojiTextStyle?.hashCode ?? 0) ^
+      (customSkinColorOverlayHorizontalOffset?.hashCode ?? 0);
 }

lib/src/skin_tone_overlay.dart

@@ -29,8 +29,15 @@ mixin SkinToneOverlayStateMixin<T extends StatefulWidget> on State<T> {
         .map((skinTone) => utils.applySkinTone(emoji, skinTone))
         .toList();
 
-    final positionRect = _calculateEmojiPosition(context, index, config.columns,
-        skinToneCount, scrollControllerOffset, tabBarHeight);
+    final positionRect = _calculateEmojiPosition(
+      context,
+      index,
+      config.columns,
+      skinToneCount,
+      scrollControllerOffset,
+      tabBarHeight,
+      config.customSkinColorOverlayHorizontalOffset,
+    );
 
     _overlay = OverlayEntry(
       builder: (context) => Positioned(
@@ -95,8 +102,15 @@ mixin SkinToneOverlayStateMixin<T extends StatefulWidget> on State<T> {
         ),
       );
 
-  Rect _calculateEmojiPosition(BuildContext context, int index, int columns,
-      int skinToneCount, double scrollControllerOffset, double tabBarHeight) {
+  Rect _calculateEmojiPosition(
+    BuildContext context,
+    int index,
+    int columns,
+    int skinToneCount,
+    double scrollControllerOffset,
+    double tabBarHeight,
+    double? customSkinColorOverlayHorizontalOffset,
+  ) {
     // Calculate position of emoji in the grid
     final row = index ~/ columns;
     final column = index % columns;
@@ -107,7 +121,8 @@ mixin SkinToneOverlayStateMixin<T extends StatefulWidget> on State<T> {
     final topOffset = emojiSpace;
     final leftOffset =
         _getLeftOffset(emojiSpace, column, skinToneCount, columns);
-    final left = offset.dx + column * emojiSpace + leftOffset;
+    final dx = customSkinColorOverlayHorizontalOffset ?? offset.dx;
+    final left = dx + column * emojiSpace + leftOffset;
     final top = tabBarHeight +
         offset.dy +
         row * emojiSpace -

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: 1.6.2
+version: 1.6.3
 homepage: https://github.com/Fintasys/emoji_picker_flutter
 
 environment: