Flutter Web 中的移动浏览器无法正确呈现表情符号

Question

如果我输入这样的字符串'🤔你能解决这个测验吗？💰🤖#AI 很困惑！ 🎁每人 5 份 30！赢得 FL &❤️ & RT @binary_x2⃣ 填写空白👇并标记 2 位朋友！在文本小部件中，它可以在任何浏览器上正确呈现。

但是，如果我使用

  return String.fromCharCode(emojiCode!);
  

iOS Safari 上的 html 渲染器显示了这一点 。

它仍然可以在桌面浏览器上正确呈现，但在 Android 浏览器上也会崩溃。我知道通过使用 Canvaskit 渲染器可以修复 Noto 字体，但我想使用 html 渲染器来完成此操作。 有什么想法吗？

首先我使用的是 Canvaskit 渲染器，但由于初始加载时间，我尝试转向 html。但是，我无法让表情符号在移动浏览器上正确显示，而在桌面上一切都按预期工作。

Answer 1

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);
}