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

qltillow 于 2023-05-19 发布在 Flutter

关注(0)|答案(3)|浏览(273)

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

flutter

来源：https://stackoverflow.com/questions/70615114/how-to-show-colored-emoji-from-custom-font-on-flutter-app

3条答案

按热度按时间

xqkwcwgp1#

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

赞(0）回复(0）举报 2023-05-19

lf5gs5x22#

如前所述，由于操作系统和应用程序的限制，这种字体不会显示彩色表情符号。
我认为显示彩色表情符号的最佳替代方法是使用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),
            ),
          ],
        ),
      ),

赞(0）回复(0）举报 2023-05-19

ilmyapht3#

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

赞(0）回复(0）举报 2023-05-19