Render emoji flags on windows

Question

I've tried to render emoji flags such as notoColorEmoji (french flag) using google fonts, but for some reason they don't get rendered at all.

It works fine for other monochromatic fonts, but I couldn't find out how to make them work on windows (I'm using windows 10).

When I try this, the first two are rendered as expected, but the font "Noto Color Emoji" simply renders blank on all emojis.

            Text('Google Fonts  Kanit',
                style: GoogleFonts.kanit(
                  textStyle: const TextStyle(fontSize: 20),
                )),
            Text('Google Fonts  notoEmoji',
                style: GoogleFonts.notoEmoji(
                  textStyle: const TextStyle(fontSize: 20),
                )),
            Text('Google Fonts  notoColorEmoji',
                style: GoogleFonts.notoColorEmoji(
                  textStyle: const TextStyle(fontSize: 20),
                )),

Output:

Is there a fix for it, or another alternative to allow a windows app to render color emojis?

ps: I'm looking for a solution that doesn't involve "hacks" or installing a font in the system, which can mess with other apps.

Answer 1

Unfortunately, without using hacks or installing external fonts, the options are limited. Windows 10's native font rendering system may not fully support color fonts like Noto Color Emoji, leading to rendering issues.

One potential workaround could be to use Unicode characters for the flags instead of relying on specific fonts. However, this approach may not provide the same visual fidelity as using emoji flags.

Another option could be to explore whether the application or platform you're using supports custom emoji rendering methods that might work better on Windows 10.

Ultimately, until Windows improves its support for color fonts or provides better compatibility with fonts like Noto Color Emoji, achieving consistent and reliable rendering of emoji flags might be challenging without resorting to external fonts or workarounds.