diff --git a/CHANGELOG.md b/CHANGELOG.md index 6319584..2159360 100644 --- a/CHANGELOG.md +++ b/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` diff --git a/README.md b/README.md index 5e3947b..411e0bf 100644 --- a/README.md +++ b/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. diff --git a/lib/src/config.dart b/lib/src/config.dart index de6d3bd..1809025 100644 --- a/lib/src/config.dart +++ b/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); } diff --git a/lib/src/skin_tone_overlay.dart b/lib/src/skin_tone_overlay.dart index 82a8b1a..c7043c2 100644 --- a/lib/src/skin_tone_overlay.dart +++ b/lib/src/skin_tone_overlay.dart @@ -29,8 +29,15 @@ mixin SkinToneOverlayStateMixin on State { .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 on State { ), ); - 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 on State { 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 - diff --git a/pubspec.yaml b/pubspec.yaml index 202ca22..30914d2 100644 --- a/pubspec.yaml +++ b/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: