In flutter web some emoji is not visible

[sinnoorc]

[Fintasys]

Can you provide more information? Did you read the section in the readme about custom emoji and checked out the example? https://github.com/Fintasys/emoji_picker_flutter/blob/master/example/lib/main_custom_font.dart

[jehhxuxu]

I'm having the same problem here with Flutter Web, and I don’t have custom emojis, the default ones disappeared...

[danielGz]

It's not a thing of the emojis not existing in the OS, they do appear in the textField after selecting them, I think flutter web has issues on how it renders paths in the same widget as the emoji:

vs

I have modified the package obviously, as you can see removed the triangle at the corner of each cell, I also simplified the cell for the skin tone overlay, removed the inkwell and elevation.

[Fintasys]

I tried both renderer for web with the example/main.dart (without custom font) and didn't have any issues. Can you point out which part removing brought improvements or how to replicate? Maybe Browser?

[jehhxuxu]

About the browser, I was testing with Chrome... and I can’t get the skin tone as well =/

[Fintasys]

Any idea how to reproduce the issue? Difficult to check the issue otherwise 😢

[Fintasys]

Please re-open the issue if it's still happening 🙏

[GleammerRay]

Same issue on my end.

Also, it only works in debug mode or with --source-maps enabled, gives an unidentifiable obfuscated error otherwise.

[GleammerRay]

Apparently there's a bunch of issues with Flutter's HTML renderer (which is why https://github.com/flutter/flutter/issues/145954 exists) so I moved my extension over to CanvasKit and it seems to have fixed the emojis.

There were some CSP issues on my end so I ended up employing the option implemented in https://github.com/flutter/flutter/issues/70101 to bundle CanvasKit into my extension.

I built and ran successfully with flutter build web --web-renderer canvaskit --csp --pwa-strategy=none --source-maps --dart-define=FLUTTER_WEB_CANVASKIT_URL=/.

I also had to change my CSP from:

"extension_pages": "script-src 'self' ; object-src 'self'"

To:

"extension_pages": "script-src 'self' 'wasm-unsafe-eval' ; object-src 'self'"

Apparently CanvasKit renders emojis in black and white by default, so I had to change a line in my web index files from this:

let appRunner = await engineInitializer.initializeEngine();

To this:

let appRunner = await engineInitializer.initializeEngine({useColorEmoji: true});

(see https://docs.flutter.dev/platform-integration/web/initialization)

I have yet to test the extension on Firefox but it seems to work on Chromium so far.

Flutter web is still quite a mess. 😅

[GleammerRay]

Also I just tested it without --source-maps and it works on CanvasKit, must be another weird HTML renderer issue.