如何在Flutter应用程序中使用自定义字体显示彩色表情符号？

Question

我想在我的Flutter应用程序中使用Twemoji字体。我已经安装了这个字体。但是当我尝试在TextSpan中使用它时，我看到的是单色表情符号而不是彩色的。如何解决？

我的代码：

RichText(
    text: TextSpan(
      children: <TextSpan>[
        TextSpan(text: "Some text ", style: GoogleFonts.roboto(
          fontSize: 24,
          color: Colors.black,
        )),
        TextSpan(text: "", style: TextStyle(
          fontFamily: "TwitterColorEmoji",
          fontSize: 24,
        )),
      ]
    )
  )

- Sergey Kazantsev

Answer 1

正如所说，由于操作系统和应用程序的限制，该字体无法显示彩色表情符号。

我认为展示彩色表情符号的最佳替代方法是使用以下代码中的WidgetSpan和SvgPicture：

      RichText(
        text: TextSpan(
          children: [
            TextSpan(
              text: "Some text ",
              style: GoogleFonts.roboto(
                fontSize: 24,
                color: Colors.black,
              ),
            ),
            WidgetSpan(
              child: SvgPicture.asset("assets/emojies/confused-face.svg"),
              style: TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),

- Sergey Kazantsev

Answer 2

从Flutter 3.10开始，在Web上初始化引擎时，现在可以传递一个新的参数useColorEmoji。

请参见：https://github.com/flutter/flutter/issues/119536#issuecomment-1513309144。

- tjarvstrand

---

谢谢！我在其他地方找不到好的解决方案，但是后来找到了你的答案，它正是我正在寻找的那种解决方案 :) - undefined

Answer 3

我明白了，Twemoji字体可以在所有操作系统中使用，但目前只能在Firefox、Thunderbird、Photoshop CC 2017+和Windows Edge V38.14393+中显示彩色表情符号。这不是字体的限制，而是操作系统和应用程序的限制。

- Rohith Nambiar

---

是的，我忘记添加我的代码了。我已经使用了 RichText 小部件。 - Sergey Kazantsev

现在它能工作了吗？ - Rohith Nambiar

很遗憾，不行。请看下面回答中的我的评论。 - Sergey Kazantsev

该问题在字体的Github存储库中提到。 - Rohith Nambiar