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

qltillow  于 2023-05-19  发布在  Flutter
关注(0)|答案(3)|浏览(264)

我想在我的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,
        )),
      ]
    )
  )
xqkwcwgp

xqkwcwgp1#

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

lf5gs5x2

lf5gs5x22#

如前所述,由于操作系统和应用程序的限制,这种字体不会显示彩色表情符号。
我认为显示彩色表情符号的最佳替代方法是使用WidgetSpanSvgPicture,如下面的代码所示:

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),
            ),
          ],
        ),
      ),
ilmyapht

ilmyapht3#

从Flutter 3.10开始,一个新的参数useColorEmoji现在可以在Web上初始化引擎时传递。
参见:https://github.com/flutter/flutter/issues/119536#issuecomment-1513309144

相关问题