Question 76494 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter Web shows emojis in black&white

In ios/android apps emojis are shown correctly. But using any web-browser (e.g. Chrome) the emoji appears in black and white. I also tried different Font-Families but with the same result.

class _MyHomePageState extends State<MyHomePage> {
      @override
      Widget build(BuildContext context) {
        return const Scaffold(
          body: Center(
            child: Text('Enjoy! 🥳 If there's any question')
          ),
        );
      }
    }

enter image description here
enter image description here

Tags:

2

Answers


  1. 0

    Use Noto Color Emoji from google (follow this steps):

    1. Download the font Download Noto Color Emoji

    1. Added it to pubspec.yaml `flutter:
      fonts:

      • family: Noto Color Emoji
        fonts:

        • asset: assets/fonts/NotoColorEmoji-Regular.ttf`

    2. And in TextStyle class use it like this TextStyle( fontFamilyFallbackm: [ 'Apple Color Emoji', 'Noto Color Emoji', ], )

    Unlike that try to:

    . Delete web folder

    . Update flutter by using command flutter upgrade

    . Run command flutter create .

    Login or Signup to reply.
  2. 0

    Right now, it is issue with the flutter-engine. It was probably introduced in here https://github.com/flutter/engine/commit/7406fd81865292772689a1bbbc2239c665ba07d8

    The initial issue looks like the fonts provided in flutter does not have support for emoji characters (.AppleSystemUIFont) hence first fallback font is used that is NatoEmoji.

    The temporary solution is to provide Apple Color Emoji font file to the web app as asset. You can find the file here
    "/System/Library/Fonts/Apple Color Emoji.ttc"
    You can copy this to your app’s asset. Once that is done,

    ...
dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  universal_io: ^2.2.0
...

flutter:
  ...

  fonts:
    - family: "Apple Color Emoji"
      fonts:
        - asset: assets/fonts/apple_color_emoji.ttc

    Then inside main.dart

    import 'package:flutter/material.dart';
import 'package:universal_io/io.dart';

void main() async {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    final fontFamilyFallback = <String>[];
    if (Platform.isIOS || Platform.isMacOS) {
      fontFamilyFallback.add("Apple Color Emoji");
    }
    return MaterialApp(
      theme: ThemeData(fontFamilyFallback: fontFamilyFallback),
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Builder(builder: (context) {
            return const SelectableText(
              '😆',
              style: TextStyle(
                fontSize: 120,
              ),
            );
          }),
        ),
      ),
    );
  }
}

    Output:
    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search