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

Question

我想在我的 Flutter 应用中使用 Twemoji font。我安装了这个字体。但是当我尝试在 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,
        )),
      ]
    )
  )

Answer 1

我知道了，Twemoji font 适用于所有操作系统，但目前仅在 Firefox、Thunderbird、Photoshop CC 2017+ 和 Windows Edge V38.14393+ 中显示彩色表情符号。这不是字体的限制，而是操作系统和应用程序的限制。

Answer 2

如前所述，由于操作系统和应用程序的限制，此字体不会显示彩色表情符号。

我认为显示彩色表情符号的最佳替代方法是使用 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),
            ),
          ],
        ),
      ),

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

How to show colored emoji from custom font on Flutter app?

emoji

flutter