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

user_9244323 0
Viewed 209

I'd like to use Twemoji font in my Flutter app. I installed this font. But when I try to use it in TextSpan, I see monochromatic emoji instead of colored. How to fix it?

Result

My code:

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,
        )),
      ]
    )
  )
emoji flutter
2 Answers

I got it, Twemoji font works in all operating system but will currently only show color emoji in Firefox, Thunderbird, Photoshop CC 2017+, and Windows Edge V38.14393+. This is not a limitation of the font, but of the operating systems and applications.

user_157477570

As has been said, die to limits of operation system and applications, this font won't show colored emojies.

I think the best altenative way to show colored emojies is using WidgetSpan with SvgPicture like in code below:

      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),
            ),
          ],
        ),
      ),
user_92443230
Related