[Engine][3.7] Emojis are not properly rendered

[KnucklesEQ]

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:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: Colors.blueGrey,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @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);
  }
}

Expected results:

This happens in Flutter 3.3.10:

Actual results:

This happens in Flutter 3.7:

-- Thanks!

[FXschwartz]

@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?

[danagbemava-nc]

I can reproduce the issue only when I do not include the NotoColorEmoji font.

Hi @KnucklesEQ, is this the same case for you as well?

without NotoColorEmoji	with NotoColorEmoji

[KnucklesEQ]

@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 build our last web app with Flutter Master:

Flutter is already up to date on channel master
Flutter 3.7.0-31.0.pre.25 • channel master • https://github.com/flutter/flutter.git
Framework • revision 2c34a88eb8 (hace 79 minutos) • 2023-01-31 02:28:09 -0500
Engine • revision 72abe0e4b8
Tools • Dart 3.0.0 (build 3.0.0-179.0.dev) • DevTools 2.20.1

The problem still persist:

[KnucklesEQ]

I can reproduce the issue only when I do not include the NotoColorEmoji font.

Hi @KnucklesEQ, is this the same case for you as well? without NotoColorEmoji with NotoColorEmoji ...

Hi @danagbemava-nc

Yes, it works with the NotoColorEmoji font:

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 (https://github.com/flutter/flutter/issues/119602#issue-1563738085), if the user enters an emoji in a TextField, you can't get it to display correctly with NotoColorEmoji.

That's why I wrote this issue, I don't understand that NotoColorEmoji is a solution.

[danagbemava-nc]

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 https://github.com/flutter/flutter/issues/119536#issuecomment-1410765755), 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.

screenshots

Web

canvaskit	HTML

Windows

entering emoji in textfields	displaying flag emoji

code sample

import '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

[✓] Flutter (Channel stable, 3.7.0, on macOS 13.1 22C65 darwin-arm64, locale en-GB)
    • Flutter version 3.7.0 on channel stable at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b06b8b2710 (8 days ago), 2023-01-23 16:55:55 -0800
    • Engine revision b24591ed32
    • Dart version 2.19.0
    • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (version 2022.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[!] Android Studio (version 2022.1)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] IntelliJ IDEA Community Edition (version 2022.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.74.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.58.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 13.1 22C65 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 109.0.5414.119

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 2 categories.

[!] Flutter (Channel master, 3.7.0-31.0.pre.24, on macOS 13.1 22C65 darwin-arm64, locale en-GB)
    • Flutter version 3.7.0-31.0.pre.24 on channel master at /Users/nexus/dev/sdks/flutters
    ! Warning: `flutter` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/nexus/dev/sdks/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nexus/dev/sdks/flutters. Consider adding /Users/nexus/dev/sdks/flutters/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 7ba440655a (9 hours ago), 2023-01-30 20:37:21 -0800
    • Engine revision 9448f2966c
    • Dart version 3.0.0 (build 3.0.0-179.0.dev)
    • DevTools version 2.20.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[!] Android Studio (version 2022.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[!] Android Studio (version 2022.1)
    • Android Studio at /Users/nexus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] IntelliJ IDEA Community Edition (version 2022.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.74.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.58.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 13.1 22C65 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 109.0.5414.119

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 3 categories.

Platforms I have personally tested

Platform	Does issue reproduce
iOS	❌
macOS	❌
windows desktop	✅
HTML	❌
canvaskit	✅
android	❌

❌: Issue does not reproduce ✅: Issue reproduces

Edit: added more info about platforms

[KnucklesEQ]

Thanks @danagbemava-nc

We did some additional research, and we found also that something similar happens in Linux Desktop and in Windows Desktop:

• In Linux:

• In Windows:

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 Canvaskit issue?

PS: The Android version of the app works fine.

[danagbemava-nc]

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 Ubuntu 22.04.1 LTS 5.15.0-58-generic

[KnucklesEQ]

Hi @danagbemava-nc

I'm using Debian GNU/Linux 11 (bullseye) stable, with kernel Linux 5.10.0-21-amd64 x86_64.

This is the info from flutter doctor:

[✓] Linux toolchain - develop for Linux desktop
    • Debian clang version 11.0.1-2
    • cmake version 3.18.4
    • ninja version 1.10.1
    • pkg-config version 0.29.2

On Windows, I tested the app on Windows 10.

[while-loop]

Adding another data point to this issue.

Building web v3.7.0 w/ canvaskit shows monochrome emojis. On:

• Linux Chrome browser
• Android Chrome browser
• iOS Safari & Chrome browser.

Downgrading to v3.3.10 shows the correct emoji on the devices list above :point_up:

flutter docker -v

[!] Flutter (Channel stable, 3.7.0, on Ubuntu 20.04.1 LTS 5.8.0-34-generic, locale en_US.UTF-8)
    • Flutter version 3.7.0 on channel stable at /home/anthony/fvm/versions/3.7.0
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b06b8b2710 (11 days ago), 2023-01-23 16:55:55 -0800
    • Engine revision b24591ed32
    • Dart version 2.19.0
    • DevTools version 2.20.1
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Chrome - develop for the web
    • Chrome at google-chrome

[✓] Linux toolchain - develop for Linux desktop
    • clang version 10.0.0-4ubuntu1
    • cmake version 3.16.3
    • ninja version 1.10.0
    • pkg-config version 0.29.1

[✓] Connected device (2 available)
    • Chrome (web)    • chrome • web-javascript • Google Chrome 108.0.5359.124

[chinmaygarde]

@danagbemava-nc Trying to figure out if this is a regression on the Windows desktop platforms with 3.7. On the web, I believe this is WAI because of the inability of the Web GL backend to access system fonts.

[danagbemava-nc]

@chinmaygarde, this doesn't appear to be a regression on windows. I created 2 projects one with flutter 2.10.5 and flutter 3.3.10, and the bug reproduces on those versions as well.

[knyghtryda]

We are seeing this issue in our web app as well.

3.0.5 looks fine

3.7.0 is in black and white

Currently testing in Safari and chrome.

[tomasweigenast]

I can confirm the issue is on MacOS chrome, safari, firefox, and edge. It only happens on CanvasKit. Using the HTML renderer works fine.

[jsaulsberry-cvet]

Also seeing this issue as well.

[imrhk]

Until the issue is resolved, here is a temporary solution I managed to find.

https://stackoverflow.com/a/75519846/16569443

[bleroux]

cc @hterkelsen for insights, this regression seems to be related to the font fallback changes made in https://github.com/flutter/engine/pull/35646.

[Johann673]

I reproduce this issue with all emojis, on :

• macOS : Chrome/Safari
• Windows : Chrome/Edge
• Android : Chrome

Everything it's ok on flutter 3.3.10, but broken since flutter 3.7.0

Example :

[vinay-elred]

Still the issue is not fixed in the latest hotfix flutter 3.7.7.

[snowb1shop]

@chinmaygarde Is it possible to make it a higher priority than p4 ?

Many Flutter web apps are using emojis. In our team it will be a blocker for bumping the Flutter version as long as this issue exists since our customers will immediately see that something is off.

The P4 label indicates issues that we agree are important to work on, but not at the top of the work list. This is the default level for bugs. A bug at this priority level may not be fixed for a long time. Sometimes a bug at this level will first migrate to P3 before we work on them, but that is not required.

[bleroux]

@yjbanov This issue was not labeled as web at first. You might be interested in setting the priority as this is a canvaskit issue. FYI, this regression seems to be related to the Canvaskit font fallback changes made in https://github.com/flutter/engine/pull/35646.

[ferrarafer]

Same issue here! In the meantime, I'm using html render instead of canvas.

flutter run -d chrome --web-hostname localhost --web-port 5000 --web-renderer html

[KnucklesEQ]

Hi @hterkelsen, @huycozy

I understand that your pull-request solves the problem on the Web, but as previously discussed in this thread, the Issue refers to other platforms as well: Linux and Windows.

I have performed a small test on the Master channel, and the problem is still there on these platforms.

Therefore I would not consider this Issue as solved.

Regards,

[tomasweigenast]

Does it actually fixes the bug or uses another font with more overload to the app's binary?

[mdebbar]

Due to the large size of the color emoji font, we made it an opt-in feature on the web.

In order to get color emojis in your app, you need to pass useColorEmoji: true when initializing the engine (described here).

[awojtas]

@mdebbar setting useColorEmoji: true doesn't seem to take any effect? The page you linked to hasn't got that flag documented.

I have tried setting index.html as below but there is no change:

...
</head>
<body>
  <script>
    // BEGIN CHANGE
    window.flutterConfiguration = {
      useColorEmoji: true
    };
    // END CHANGE
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        }
      }).then(function(engineInitializer) {
        return engineInitializer.initializeEngine();
      }).then(function(appRunner) {
        return appRunner.runApp();
      });
    });
  </script>
</body>
...

[PollyGlot]

Is there any temporal solution for Android as well ? Or maybe we can get an info when the fix will be available ?

[mdebbar]

@awojtas I'm not sure how or if window.flutterConfiguration plays nicely with initializeEngine() (@ditman?). Since you are already using the newer initializeEngine() API, you should drop window.flutterConfiguration.

Try something like this:

...
</head>
<body>
  <script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        }
      }).then(function(engineInitializer) {
        // BEGIN CHANGE
        return engineInitializer.initializeEngine({
          useColorEmoji: true,
        });
        // END CHANGE
      }).then(function(appRunner) {
        return appRunner.runApp();
      });
    });
  </script>
</body>
...

[ditman]

I'm not sure how or if window.flutterConfiguration plays nicely with initializeEngine() (@ditman?).

window.flutterConfiguration is going to be eventually removed, so please don't use it in newer versions of Flutter!

[FeodorFitsner]

@mdebbar Should it work with the latest Flutter 3.7.11 or support for useColorEmoji: true wasn't released yet?

[ditman]

@FeodorFitsner if I'm reading this correctly, the useColorEmoji parameter should be currently available in the beta channel (to be released as 3.10 stable).