Heart suit emoji looks incorrect in iOS text field.

[aaronscherbing]

The heart suit emoji (from the deck of cards suits, not the typical heart emoji) is displayed incorrectly once it is typed into the iOS text field. I'm not noticing this behavior on native iOS applications, so I'm assuming this is something funky that Flutter is doing.

Steps to Reproduce

1. Create new application: flutter create myapp
2. Add TextFormField() to the body of main.dart's Scaffold.
3. Type the deck of cards heart suit emoji into that TextFormField.

Expected results: I expect the emoji in the text field to look like the emoji on the keyboard.

Actual results: The emoji in the text field is black, while the emoji on the keyboard is red.

[iapicca]

Hi @aaronscherbing are you still experiencing the issue with the latest stable or above? Thank you

[aaronscherbing]

Yes, I'm seeing this with 1.17.5. The card suits look different:

[jjpbogers]

The issue is a bit more general: it occurs also for some other smileys, e.g. :one:

[kf6gpe]

https://github.com/flutter/flutter/issues/39420 may change this?

[reesz]

Just in case anyone is looking for a messy workaround for the time being here is some strange behavior I encountered: In my case it was the ➡️ emoji that was displayed as ⮕ instead. In our app we had another tab that displayed a lot of emojis – if that tab was rendered before the one with the ⮕-bug, the ⮕'s were displayed correctly as ➡️ .

tl;dr: I'm rendering this sequence of emojis as a hidden string offscreen in a stack at root-lvl of the app:

Positioned(
    top: 0,
    left: 0,
    child: IgnorePointer(
        child: Opacity(
            opacity: 1, child: Text('🔥👟💎🤯⭐❗🥶⚪️🥵🔝😱💥', style: TextStyle(fontSize: 20)))),
),

I didn't bother to figure out which one of these emojis or which amount was responsible for "fixing it", but somehow displaying a couple of emojis beforehand somehow "makes Flutter render all emojis correctly".

[darshankawar]

Issue replicable on latest master and stable. The heart and spade emojis from deck of card suits, renders in black.

flutter doctor -v

[✓] Flutter (Channel stable, 1.22.6, on Mac OS X 10.15.4 19E2269 darwin-x64,
    locale en-IN)
    • Flutter version 1.22.6 at /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision 9b2d32b605 (6 days ago), 2021-01-22 14:36:39 -0800
    • Engine revision 2f0af37152
    • Dart version 2.10.5

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 12.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.9.3

[!] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (2 available)
    • SM A260G (mobile)            • 5200763ebcfa861f • android-arm • Android
      8.1.0 (API 27)
    • AOSP on IA Emulator (mobile) • emulator-5554    • android-x86 • Android 9
      (API 28) (emulator)

! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 1.26.0-13.0.pre.229, on Mac OS X 10.15.4 19E2269
    darwin-x64, locale en-IN)
    • Flutter version 1.26.0-13.0.pre.229 at
      /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision 650b240634 (5 hours ago), 2021-01-27 21:39:06 -0800
    • Engine revision 68cd4c42b5
    • Dart version 2.12.0 (build 2.12.0-267.0.dev)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    • Android SDK at /Users/dhs/Library/Android/sdk
    • Platform android-30, build-tools 30.0.0
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.

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

[✓] Android Studio (version 4.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
    • Java version OpenJDK Runtime Environment (build
      1.8.0_242-release-1644-b3-6915495)

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

[✓] Connected device (4 available)
    • SM A260G (mobile)            • 5200763ebcfa861f • android-arm    • Android
      8.1.0 (API 27)
    • AOSP on IA Emulator (mobile) • emulator-5554    • android-x86    • Android
      9 (API 28) (emulator)
    • macOS (desktop)              • macos            • darwin-x64     • Mac OS
      X 10.15.4 19E2269 darwin-x64
    • Chrome (web)                 • chrome           • web-javascript • Google
      Chrome 88.0.4324.96

! Doctor found issues in 1 category.

[sudha-anecure]

Hi flutter team - any update on this? I am not able to render a red heart using any of the red heart codes in a text field in flutter.

[artha77]

I've resolved the issue by setting up the subtitle1 text theme with : fontFamilyFallback: ['Apple Color Emoji'] so if the emoji is not recognized it fallback on the apple emoji font

subtitle1 is the font used in the form inputs

TextTheme(
    subtitle1: ThemeData.light().textTheme.subtitle1
        ?.copyWith(
        fontFamilyFallback: ['Apple Color Emoji'],
    ),
  );

[JoshJuncker]

I don't think this issue is completely resolved by explicitly specifying the Apple Color Emoji font family fallback. Android still has issues. If you take a look at the screenshot below, you can see how using variant selector 16 of Unicode 3.2 doesn't work, unless it is prefixed by a different emoji.

Is there a better workaround for this? Or an upcoming fix? Some of our user generated content includes this kind of text and it breaks the entire text span.

I also don't think that specifying the fontFamilyFallback is a great solution for iOS. It should fallback automatically like it does for any other emoji/unicode character.

[TesteurManiak]

@JoshJuncker I've been able to fix this behavior by doing the following:

• Download the Google font Noto Color Emoji
• Add the font to your app and include it in your pubspec.yaml

flutter:
  fonts:
    - family: Noto Color Emoji
      fonts:
        - asset: assets/fonts/NotoColorEmoji-Regular.ttf

• Add "Noto Color Emoji" to the list of fontFamilyFallback

TextStyle(
  fontFamilyFallbackm: [
    'Apple Color Emoji',
    'Noto Color Emoji',
  ],
)

[cbatson]

Folks, be sure to thumbs-up the original post if you want to assist the development team in deciding how to prioritize amongst the many issues. Here I am the 11th commenter with this issue and so far the only one to give it a 👍 after nearly two years.

[maheshj01]

Reproducible on stable 3.3 and master 3.7

flutter doctor -v (mac)

[✓] Flutter (Channel master, 3.7.0-13.0.pre.131, on macOS 13.1 22C65 darwin-arm64, locale en-IN)
    • Flutter version 3.7.0-13.0.pre.131 on channel master at /Users/mahesh/Development/flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 0196e6050b (2 days ago), 2022-12-31 11:10:23 -0500
    • Engine revision 932591ec04
    • Dart version 3.0.0 (build 3.0.0-76.0.dev)
    • DevTools version 2.20.0
    • 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-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2021.2)
    • 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
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 13.1 22C65 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 108.0.5359.124

[✓] HTTP Host Availability
    • All required HTTP hosts are available
    
• No issues found!

[✓] Flutter (Channel stable, 3.3.9, on macOS 12.6 21G115 darwin-arm, locale en-IN)
    • Flutter version 3.3.9 on channel stable at /Users/mahesh/Development/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b8f7f1f986 (24 hours ago), 2022-11-23 06:43:51 +0900
    • Engine revision 8f2221fbef
    • Dart version 2.18.5
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0-rc4
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2021.2)
    • 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
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

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

[✓] Connected device (3 available)
    • iPhone 12 Pro (mobile) • 026D5789-9E78-4AD5-B1B2-3F8D4E7F65E4 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.6 21G115 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 107.0.5304.110

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

• No issues found!

[EddieMataEwy]

I believe #100964 is the same kind of issue

[jtothebell]

I'm seeing the same behavior as @JoshJuncker above. The workaround for iOS seems to resolve the problem, but Android has slightly different broken rendering behavior for the same emojis. Adding the Noto Color Emoji font also addresses the issue, but is far from an ideal fix for my app for two reasons: First, the font is over 23 mb in size. Second, it overrides the system emoji font for Android users whose devices aren't already using Google's emoji.

[EddieMataEwy]

For people on Windows, setting familyFontFallback didn't work for me. What worked was setting app theme familyfont (you can also only set it for specific elements) to "Segoe UI Emoji". Normal text will still be rendered natively but emojis will now be rendered correctly.

[VictorUvarov]

The incorrectly rendered emojis are also black in this case because that is what the color of the TextStyle.color is. Changing the text style color also changes the incorrect emojis' colors.

https://github.com/flutter/flutter/assets/35702719/50085308-0e46-4e83-83e4-7f203790dbcf

[gnprice]

This appears to be the same issue as #100964 (thanks @EddieMataEwy above for making the connection).

That issue was filed later but has had more discussion, and in particular more progress in diagnosing the issue. So let's close this one and consolidate discussion there.

[github-actions[bot]]

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 flutter doctor -v and a minimal reproduction of the issue.