search

Fintasys / emoji_picker_flutter

A Flutter package that provides an Emoji picker widget with 1500+ emojis in 8 categories.
MIT License
155 stars 115 forks source link

The emojis appear cutted #11

Closed rocboronat closed 3 years ago

rocboronat commented 3 years ago

My phone is a Samsung Galaxy S9. Maybe it's something related to the screen density?

photo_2021-05-11_15-04-09

Thanks for the package! 🙇

Fintasys commented 3 years ago

I can replicate the issue when I set Settings -> Display -> Display Size to large I'm not sure if I can detect this setting and adjust the sizes. 🤔 If you set the display size to normal it should be displayed correctly again. Screenshot_1620826895

rocboronat commented 3 years ago

Oh! I just tried it and you're totally right. The issue is related to the font size. The bad news is that I'm using the regular option on my Samsung S9.

So it smells that you're wrapping the Text widgets that show the emojis with a SizedBox with a static size. If that's the case, there are two options:

  1. Don't wrap the Text widgets with anything that forces them to have a specific size, so the Text widget can have the size it wants
  2. Somehow, tell the Text widget not to depend on the font-size value of the device. In native Android, it would be defining the size in dp instead of sp.

If you want to go on with the second option, I think the solution is to set textScaleFactor: 1 to the Text widget. Honestly, I didn't know it existed until now that I searched how to fix it. This is what I found in the Flutter documentation.

If I had to choose, I would ask you to go for the second option: always keeping the emojis the same size. Why? Well, I've tried it, and when you change the font size, the keyboard size doesn't change. So, as you are making a keyboard, you shouldn't either resize the emojis.

Thanks for checking the issue, by the way! 👍

Fintasys commented 3 years ago

@rocboronat Oh wow, good finding ! Thanks for the research 🙇 textScaleFactor: 1 seems to fix the issue perfectly! I gonna release a new version soon, will take a look on the other issues as well before.

rocboronat commented 3 years ago

Oh, that's great news! Glad it worked 😄 And thanks for the update and your time! 😊

Fintasys commented 3 years ago

Fix released with version 1.0.5

rocboronat commented 3 years ago

Hello! I'm sorry... I bring bad news. With the 1.0.5 version, the issue has improved a lot, but the emojis still appear a bit cut. Here's a screenshot to showcase the issue, and in addition, show the "box" where the emojis are printed.

emojis-issue

It's like you are applying a too aggressive padding? Maybe you could just center it with a Center widget and that's it.

Thanks for the fast fix, by the way!

Fintasys commented 3 years ago

@rocboronat Sorry just saw the comment. Gonna try to replicate 🤔

Fintasys commented 3 years ago

I can confirm it 😔 Will look into it the next days. Thanks for pointing out !

rocboronat commented 3 years ago

Zero worries! :·)

Fintasys commented 3 years ago

@rocboronat I think I found a fix, could you quickly confirm by replacing the dependency in your pubspec with that?

  emoji_picker_flutter:
    git:
      url: https://github.com/Fintasys/emoji_picker_flutter.git
      ref: master
rocboronat commented 3 years ago

Hi @Fintasys ! Yap, it worked! 👏👏👏 Thanks a lot! 😄

Fintasys commented 3 years ago

@rocboronat I have release 1.0.6 ! Thanks again for reporting 🙇

rocboronat commented 3 years ago

Thank you so much for fixing the issue! ❤