[Engine][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?
|
danagbemava-nc
added
the
waiting for customer response
I build our last web app with Flutter Master: The problem still persist: |
github-actions
bot
removed
the
waiting for customer response
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 |
danagbemava-nc
changed the title
|
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. screenshotsWeb
Windows
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 -vPlatforms I have personally tested
❌: Issue does not reproduce Edit: added more info about platforms |
danagbemava-nc
added
c: regression
|
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. |
danagbemava-nc
changed the title
danagbemava-nc
added
engine
|
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
|
danagbemava-nc
added
the
waiting for customer response
|
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. |
github-actions
bot
removed
the
waiting for customer response
|
Adding another data point to this issue. Building web
Downgrading to
|
|
For people on Windows, setting familyFontFallback didn't work for me. |
Fallback to Noto Color Emoji is needed to render emojis in color. See: flutter/flutter#119536
Fallback to Noto Color Emoji is needed to render emojis in color. See: flutter/flutter#119536
Fallback to Noto Color Emoji is needed to render emojis in color. See: flutter/flutter#119536
Fallback to Noto Color Emoji is needed to render emojis in color. See: flutter/flutter#119536
|
How to resolve on windows for now? I still can not get emoji properly rendered with flutter 3.13
|
Quoted reply.
@lucasjinreal Windows' built-in emoji font does not have support for Flags hence why it shows them as their ISO Country Codes only. The only emoji flags that render on Windows are non-Country flags. In case you see any empty spots where you expect Emojis, it's because Windows emoji font hasn't been updated with the newer emojis that were published by the Unicode Consortium. Flutter Docs have a section on how you can use a custom font, so you might want to use Noto Color Emoji/Twemoji (free), JoyPixels (paid), or something else: Flutter Docs: Use a custom font |
|
👋 @ditman Is there a way to get the same outcome without having to use the old initialisation that allows us to set Is there a possibility of having this set to true by default somewhere for the client (us) or it's not the desired path for a solution? Update:The solution is documented here https://docs.flutter.dev/platform-integration/web/bootstrapping |
|
Why is this behind a flag |
@cedvdb Good question (and poorly documented on our end, I just found out!). The fallback font we use to render color emojis (Noto Color Emoji) is very large (a ~24MB download IIRC), so we defaulted to the lightest one (Noto Emoji). |
|
I assume you considered having text as platform views, so why not ? Letter spacing not being exactly the same on every platforms pales in comparison of adding an additional 24MB for emojis, or not being able to select text for free. |
But why does Flutter need a custom font to render emojis if operating systems already have their font with emojis? |
@tomasweigenast Good question! The reason is that Skia (also canvaskit) needs the bytes of whatever font you want to use so it can render text, and doesn't have access to the system fonts (see the
@cedvdb yeah, I don't know if there's a specific proposal for all text, but I know a (sadly, former) member of the team was working on text input as platform views. Doing all text may have been a logical continuation. |
But Skia is used on Android too. And there, we don't need the Noto Emoji font to render emojis. |
@tomasweigenast yeah, Android has a completely different set of (security) restrictions than the Web, and this is one of them :) On the web, there's the Local Font Access API, but it's not widely available yet, and it prompts the user for permissions when you want to access their local fonts (check the demo). |
|
With the new version of Flutter where we build with wasm support the index.html file's content has changed and I can only see |
You can modify the behavior. Check the official docs: https://docs.flutter.dev/platform-integration/web/initialization |
@kamranbekirovyz, @tomasweigenast linked to the best documentation page for this. The code is essentially the same, but it now can live in the I migrated some of my example apps to the new syntax a while ago; I can point you to some of those examples if the docs aren't enough :) |
SOLVED: solution at bottom of postStill seems that useColorEmoji is not working.
{{flutter_js}}
{{flutter_build_config}}
window.addEventListener("load", function () {
var loading = document.querySelector("#loading");
_flutter.loader
.load({
entrypointUrl: "main.dart.js?v=UNIQUE_VERSION_STRING",
serviceWorker: {
timeoutMilis: 6000,
serviceWorkerVersion: {{flutter_service_worker_version}},
},
})
.then(function (engineInitializer) {
loading.classList.add("main_done");
return engineInitializer.initializeEngine({ useColorEmoji: true });
})
.then(function (appRunner) {
loading.classList.add("init_done");
return appRunner.runApp();
})
.then(function (app) {
// Wait a few milliseconds so users can see the "zoooom" animation before getting rid of the "loading" div.
window.setTimeout(function () {
loading.remove();
}, 200);
});
});
<script src="flutter_bootstrap.js" async></script>
There is a simple loading animation, which works correctly. It is just the b-w emojis that are not working.
Any obvious steps I've missed here? Thoughts on what the problem might be? Thanks for any help @ditman & all 🙏 flutter doctor -v[✓] Flutter (Channel stable, 3.22.2, on macOS 14.5 23F79 darwin-arm64, locale en-NL) [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) [✓] Xcode - develop for iOS and macOS (Xcode 15.4) [✓] Chrome - develop for the web [✓] Android Studio (version 2023.1) [✓] VS Code (version 1.90.2) [✓] Connected device (5 available) [✓] Network resources • No issues found! SOLUTION
In window.addEventListener("load", function () {
var loading = document.querySelector("#loading");
_flutter.loader
.load({
entrypointUrl: "main.dart.js?v=UNIQUE_VERSION_STRING",
serviceWorker: {
timeoutMilis: 6000,
serviceWorkerVersion: "3786782205",
},
})
.then(function (engineInitializer) {
loading.classList.add("main_done");
return engineInitializer.initializeEngine({ useColorEmoji: true });
})
.then(function (appRunner) {
loading.classList.add("init_done");
return appRunner.runApp();
})
.then(function (app) {
// Wait a few milliseconds so users can see the "zoooom" animation before getting rid of the "loading" div.
window.setTimeout(function () {
loading.remove();
}, 200);
});
});to this: window.addEventListener("load", function () {
var loading = document.querySelector("#loading");
_flutter.loader.load({
onEntrypointLoaded: async function (engineInitializer) {
loading.classList.add("main_done");
const appRunner = await engineInitializer.initializeEngine({ useColorEmoji: true });
loading.classList.add("init_done");
await appRunner.runApp();
window.setTimeout(function () {
loading.remove();
}, 200);
},
});
}); |
This is the way, @T-P-F, the promise syntax has been deprecated for a while (I think the browser console should be telling you to use |
|
We need to document https://docs.flutter.dev/platform-integration/web/initialization |
If it was, I'd missed it 🤷 |
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. |
|
it seems emoji encoding problem
Irvan Bastian ***@***.***> 于2024年7月11日周四 08:41写道：
… 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.
—
Reply to this email directly, view it on GitHub
<#119536 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/ACIJ3SSNRPSPYQBDHT5CH4LZLXICBAVCNFSM6AAAAAAULOWGPGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDEMRRG43TGNRSGM>
.
You are receiving this because you are subscribed to this thread.Message
ID: ***@***.***>
|
and others
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: