flutter-packages icon indicating copy to clipboard operation
flutter-packages copied to clipboard

The font "Noto Color Emoji" fails to render on windows app

Open hioshih opened this issue 1 year ago • 2 comments

Package

google_fonts

Existing issue?

What happened?

Expected vs actual result:

When I use the font "Noto Color Emoji", it doesn't render any emojis. Other fonts like Roboto, Kanit and others works fine. Just on the flutter package "google_fonts", it leaves a blank space instead of emojis. On google chrome, it renders normally too.

Steps to reproduce:

  1. Install the latest google_fonts package with "flutter pub add google_fonts" (^6.2.1 atm)
  2. Start a new flutter project, and add some Text as in the example bellow.
  3. Compile it to windows (Windows 10 - x64)
  4. All emojis using the "Noto Color Emoji" are not rendered while the rest is fine, including other google fonts.

Example:

            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: image

Relevant log output

No response

hioshih avatar Mar 31 '24 21:03 hioshih

Can confirm.

Flutter 3.24.0 Windows 10

Minimal reproducable example:

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() => runApp(const MainApp());

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'Hello World',
                style: TextStyle(fontSize: 30),
              ),
              const SizedBox(height: 20),
              Text(
                '😊',
                style: TextStyle(
                  fontSize: 50,
                  fontFamily: GoogleFonts.notoColorEmoji().fontFamily,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Easily demonstrated by toggling commented for the fontFamily line and hot reloading.

When using Noto Color Emoji, it is invisible:

image

With the fontFamily commented out so as not to use Noto it appears with the Windows emoji font:

image

Merrit avatar Aug 14 '24 20:08 Merrit

meet the same issue with c++, anyone has the answer? thanks.

aisnote avatar Sep 16 '24 21:09 aisnote