-
Notifications
You must be signed in to change notification settings - Fork 28.6k
[web][3.7] Emojis are not properly rendered #119536
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[web][3.7] Emojis are not properly rendered #119536
Comments
@KnucklesEQ Testing this in dartpad shows the same thing. But testing on the master channel (Flutter 3.7.0-28.0.pre.20) works correctly for me. Can you try testing on master as well and see if it is fixed for you? |
I can reproduce the issue only when I do not include the Hi @KnucklesEQ, is this the same case for you as well?
|
I build our last web app with Flutter Master:
|
Yes, it works with the But the problem with this font is that it is HUGE. When I load it using the Google Fonts package, the app hangs for about 5 to 10 seconds while it downloads. And if I add the font to the assets folder, it's so huge in size (22MB vs 200-300KB of a regular font). And as mentioned here (#119602 (comment)), if the user enters an emoji in a TextField, you can't get it to display correctly with That's why I wrote this issue, I don't understand that |
Thanks for the info. I can confirm that entering emojis into a Textfield does not work as expected. See the screenshots below. When using the NotoColorEmoji with Text widgets, that works, but it doesn’t appear to be a solution for every case. Upon further investigation (based on #119536 (comment)), I found that this issue reproduces on windows as well. However, when I use the emoji keyboard on windows, I do not have any issues Side Note: this worked just fine in stable 3.3.10, but appears to have broken on 3.7.0 Labeling for further investigation. code sampleimport 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: Colors.blueGrey,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
MyWidget(),
TextField()
],
),
),
),
);
}
}
class MyWidget extends StatelessWidget {
const MyWidget({super.key});
@override
Widget build(BuildContext context) {
String k = 'ES';
String flag = k
.toUpperCase()
.split('')
.map((char) => 127397 + char.codeUnitAt(0))
.map((code) => String.fromCharCode(code))
.join();
return Text(flag);
}
} flutter doctor -v
Platforms I have personally tested
❌: Issue does not reproduce Edit: added more info about platforms |
Thanks @danagbemava-nc We did some additional research, and we found also that something similar happens in Linux Desktop and in Windows Desktop:
It's not the same case as Web. In Linux and Windows I don't see the flag with an 'ES' in it, I see only the two characters separated. Maybe this is not just a PS: The Android version of the app works fine. |
Hi @KnucklesEQ, what linux distro did you test on? I asked my colleague (@huycozy) to check on his linux machine but it worked just fine for him on both stable and master. He's running |
I'm using Debian GNU/Linux 11 (bullseye) stable, with kernel Linux 5.10.0-21-amd64 x86_64. This is the info from
On Windows, I tested the app on Windows 10. |
Adding another data point to this issue. Building web
Downgrading to
|
Yeah, it is only knowable via SO currently :) |
I used useColorEmoji in my index.html, it's works fine on my local. but when I'm deploying to my Firebase it's still showing black & white. I'm totally lost here. |
This comment was marked as duplicate.
This comment was marked as duplicate.
Please add documentation how to use |
In the index.html you can do: And at the same file level create a flutter_bootstrap.js file with this content:
This did a trick for me |
This worked for me too. I didn't understand why the iOS app, Android app, iOS web, and Android web all showed colorful emojis but not the desktop web. So then I researched and found out it was a CanvasKit specific issue. All the other solutions led me to the |
The |
This one works; however, {{flutter_js}}
{{flutter_build_config}}
_flutter.loader.load({
serviceWorkerSettings: {
serviceWorkerVersion: {{flutter_service_worker_version}},
},
onEntrypointLoaded: async function(engineInitializer) {
const appRunner = await engineInitializer.initializeEngine({
useColorEmoji: true
});
await appRunner.runApp();
},
}); |
Have no idea if it's related, but after upgrading Flutter web app from 3.19.6 to 3.24.0 the Apple emojis started looking like Google ones. Which doens't fit into the app style. Setting To fix this you can add Apple emojis font to pubspec, but the file size is 180 mb, so it's not a solution at all. Any workaround how to fix this? |
@komakur for now, only the Noto color emojis are available. We want to (maybe) render emoji using system fonts, but that's not designed/specced yet! (I think a new issue is warranted for that feature request, if you can create a new one!) |
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of |
- Enable support for WOFF2 fonts. - Add Brotli depndency (increases CK size by ~53KB compressed, including the Brotli dictionary). - Use split WOFF2 fonts for Emoji. - Remove the `useColorEmoji` runtime config flag. Partially based off of flutter/engine#41282 Fixes flutter#119536 Contributes to flutter#153974 and opens the door for moving more fonts to WOFF2.
Hi!
After installing the latest Flutter version (3.7), we noticed in our apps that the emojis in general (and emoji flags in particular) are flat, without colour.
Am I missing something? Is there a logical reason for this change? We didn't find any info related in the changelog of Flutter 3.7.
We tried to use the Noto Color Emoji in our last web application, but the app hangs many seconds to load the icons.
Steps to Reproduce
You can copy the code in DartPad:
Expected results:
This happens in Flutter 3.3.10:

Actual results:
This happens in Flutter 3.7:

--
Thanks!
The text was updated successfully, but these errors were encountered: