Emojis not being rendered properly on mobile browsers in Flutter Web

Question

If i put a string like this one 'Can you solve the quiz? #AI got puzzled! 30 for 5 each!To win FL &❤️ & RT @binary_x2⃣ Fill in the blank & tag 2 friends!' in Text Widget it gets rendered properly on any browser.

However, if i use

  return String.fromCharCode(emojiCode!);
  

with html renderer on iOS Safari it shows this broken emojis.

It still renders properly on desktop browsers, but it breaks on android browsers aswell. I know a fix with Noto fonts by using Canvaskit renderer, but i would like to make this work with html renderer. Any ideas?

First i was using Canvaskit renderer, but im trying to move to html due to initial loading time. However, i am unable to get Emojis to display properly on mobile browsers, while on desktop everything works as expected.

Answer 1

You can use this method to create a textspan with two different style.

    TextSpan _buildTextSpan(String label) {
  // Stores all the TextSpans that will be combined into the final one
  final children = <TextSpan>[];

  // Converts the label to a sequence of Unicode code points (runes)
  final runes = label.runes;

  for (int i = 0; i < runes.length;) {
    int current = runes.elementAt(i);

    // Check if the current rune represents an emoji
    final isEmoji = current > 255;
    // function to determine if a rune should be considered part
    // of the current emoji/text chunk based on emoji boundaries
    final shouldBreak = isEmoji ? (x) => x <= 255 : (x) => x > 255;
    List<int> chunk = <int>[];

    while (!shouldBreak(current)) {
      chunk.add(current);
      if (++i >= runes.length) break;
      current = runes.elementAt(i);
    }

    final span = String.fromCharCodes(chunk);

    children.add(TextSpan(
      text: span,
      style: isEmoji ? GoogleFonts.notoColorEmoji() : GoogleFonts.inter(),
    ));
  }

  return TextSpan(children: children);
}