Skip to content

[web] Emojis with skin tone are not rendered appropriately #79808

@osaxma

Description

@osaxma

As shown in the screenshot below:

Screen Shot 2021-04-05 at 10 03 28 PM

class MyHomePage extends StatelessWidget {
  final emoji = '👌🏾'; // from MacOS
  final emoji2 = '👋🏾'; // from Twitter
  // final emoji3 = '👌🏾'; // from Twitter throws error: 'Illegal character '55356'.'

  @override
  Widget build(BuildContext context) {
    print('$emoji code Units: ${emoji.codeUnits}  runes: ${emoji.runes}');
    // prints 👌🏾 code Units: [55357, 56396, 55356, 57342]  runes: (128076, 127998)
    print('$emoji2 code Units: ${emoji2.codeUnits}  runes: ${emoji2.runes}');
    // prints 👋🏾 code Units: [55357, 56395, 55356, 57342]  runes: (128075, 127998)

    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text(
          '$emoji \n $emoji2',
          style: TextStyle(fontSize: 24.0),
        ),
      ),
    );
  }
}

This behavior can be observed in Flutter Web, and also can be seen in DartPad (Based on Flutter 2.0.3 Dart SDK 2.12.2).

Metadata

Metadata

Labels

P1High-priority issues at the top of the work lista: qualityA truly polished experiencee: web_canvaskitCanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Webengineflutter/engine related. See also e: labels.found in release: 2.1Found to occur in 2.1has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specifically

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions