Emoji Keycap Sequence not supported on iOS

[fredriks]

The Emoji Sequence Data for UTS #51 has a section for Keycap sequence which specifies emoji alternatives for #, *, 0, 1, 2, 3, 4, 5, 6, 7, 8 and 9. These are available on the iOS keyboard.

They are all rendered properly as emojis on Android but not on iOS. Instead displaying the leading symbol followed by a box artifact (see screenshots).

Android

iOS

Sample code

import 'package:flutter/material.dart';

const _emojiKeycapSequence = [
  '\u0023\ufe0f\u20e3', // keycap: #
  '\u002a\ufe0f\u20e3', // keycap: *
  '\u0030\ufe0f\u20e3', // keycap: 0
  '\u0031\ufe0f\u20e3', // keycap: 1
  '\u0032\ufe0f\u20e3', // keycap: 2
  '\u0033\ufe0f\u20e3', // keycap: 3
  '\u0034\ufe0f\u20e3', // keycap: 4
  '\u0035\ufe0f\u20e3', // keycap: 5
  '\u0036\ufe0f\u20e3', // keycap: 6
  '\u0037\ufe0f\u20e3', // keycap: 7
  '\u0038\ufe0f\u20e3', // keycap: 8
  '\u0039\ufe0f\u20e3', // keycap: 9
];

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Demo',
        home: Scaffold(
          body: Center(
            child: Text(
              _emojiKeycapSequence.join(' '),
              style: TextStyle(fontSize: 20),
            ),
          ),
        ),
      );
}

flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.7.8+hotfix.3, on Mac OS X 10.14.5 18F132, locale en-SE)
 
[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 10.2.1)
[✓] iOS tools - develop for iOS devices
[✓] Android Studio (version 3.4)
[✓] Connected device (2 available)

• No issues found!

[fredriks]

In the mean time, a possible workaround is to simply remove the box artifacts by stripping the variation selector \ufe0f and enclosing keycap \u20e3 which just leaves the leading character: #, *, 0-9.

final keycapRegex =
    RegExp(r'((\u0023|\u002a|[\u0030-\u0039])\ufe0f\u20e3){1}');
var result = 'String with possible keycap emojis'
    .replaceAllMapped(keycapRegex, (match) => match[2]);

[markusaksli-nc]

Reproducible on the latest master 1.21.0-6.0.pre.226.

flutter doctor -v

[✓] Flutter (Channel master, 1.21.0-6.0.pre.226, on Mac OS X 10.15.6 19G73, locale en-GB)
    • Flutter version 1.21.0-6.0.pre.226 at /Users/markus/development/flutter_master
    • Framework revision fa60f525f0 (64 minutes ago), 2020-08-06 08:01:03 -0400
    • Engine revision 36db6cfdd1
    • Dart version 2.10.0 (build 2.10.0-3.0.dev 14a6aac97b)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/markus/Library/Android/sdk
    • Platform android-30, build-tools 30.0.1
    • Java binary at: /Users/markus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/193.6626763/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 4.0)
    • Android Studio at /Users/markus/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/193.6626763/Android Studio.app/Contents
    • Flutter plugin version 48.0.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] Connected device (4 available)
    • Nevercode’s iPhone (mobile) • b668e524315069f3db3661ac11ff1f66afafebdb • ios            • iOS 13.6
    • macOS (desktop)             • macos                                    • darwin-x64     • Mac OS X 10.15.6 19G73
    • Web Server (web)            • web-server                               • web-javascript • Flutter Tools
    • Chrome (web)                • chrome                                   • web-javascript • Google Chrome 84.0.4147.105

• No issues found!

[ThomasLilley]

Any progress on this? we are still experiencing this on Flutter stable 2.8.1 on iOS devices

[jsmestad]

I hit this today myself. While looking, I also noticed that pilot, male-pilot and woman-pilot fail to render as well.

[jsmestad]

@fredriks this workaround fixed it for me: #49627 (comment)

[danagbemava-nc]

Reproduces on the latest versions of flutter

updated sample

import 'package:flutter/material.dart';

const _emojiKeycapSequence = [
  '\u0023\ufe0f\u20e3', // keycap: #
  '\u002a\ufe0f\u20e3', // keycap: *
  '\u0030\ufe0f\u20e3', // keycap: 0
  '\u0031\ufe0f\u20e3', // keycap: 1
  '\u0032\ufe0f\u20e3', // keycap: 2
  '\u0033\ufe0f\u20e3', // keycap: 3
  '\u0034\ufe0f\u20e3', // keycap: 4
  '\u0035\ufe0f\u20e3', // keycap: 5
  '\u0036\ufe0f\u20e3', // keycap: 6
  '\u0037\ufe0f\u20e3', // keycap: 7
  '\u0038\ufe0f\u20e3', // keycap: 8
  '\u0039\ufe0f\u20e3', // keycap: 9
];

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Flutter Demo',
        home: Scaffold(
          body: Center(
            child: Text(
              _emojiKeycapSequence.join(' '),
              style: const TextStyle(fontSize: 20),
            ),
          ),
        ),
      );
}

flutter doctor -v

[✓] Flutter (Channel stable, 3.3.9, on macOS 13.0.1 22A400 darwin-arm, locale en-GB)
    • Flutter version 3.3.9 on channel stable at /Users/nexus/dev/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b8f7f1f986 (2 weeks 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)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2021.3)
    • 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.13+0-b1751.21-8125866)

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

[✓] Connected device (4 available)
    • Nexus (mobile)         • 00008020-001875E83A38002E            • ios            • iOS 16.1.2 20B110
    • iPhone 14 Pro (mobile) • 4F72110C-F38B-4CF9-93C4-4D6042148D28 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 13.0.1 22A400 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 108.0.5359.98

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

• No issues found!

[!] Flutter (Channel master, 3.7.0-4.0.pre.48, on macOS 13.0.1 22A400 darwin-arm64, locale en-GB)
    • Flutter version 3.7.0-4.0.pre.48 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 eefbe85c8b (8 hours ago), 2022-12-08 22:32:07 -0600
    • Engine revision 8d83b98c55
    • Dart version 3.0.0 (build 3.0.0-0.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)
    • Android SDK at /Users/nexus/Library/Android/sdk
    • Platform android-33, build-tools 33.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

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

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

[✓] Android Studio (version 2021.3)
    • 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.13+0-b1751.21-8125866)

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

[✓] Connected device (4 available)
    • Nexus (mobile)         • 00008020-001875E83A38002E            • ios            • iOS 16.1.2 20B110
    • iPhone 14 Pro (mobile) • 4F72110C-F38B-4CF9-93C4-4D6042148D28 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-1 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 13.0.1 22A400 darwin-arm64
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 108.0.5359.98

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

! Doctor found issues in 1 category.