CODEWITHSUNDEEP
flutter
Timm Kent
Timm Kent

Reputation: 1268

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

Upvotes: 16

Views: 5708

Answers (3)

David Miguel
David Miguel

Reputation: 14380

Due to the large size of the color emoji font (~24MB), the Flutter team made color emojis an opt-in feature in Flutter 3.10.0 (ref).

To enable it, set the useColorEmoji flag to true when initializing the engine in your index.html file:

engineInitializer.initializeEngine({
  // other config...
  useColorEmoji: true,
});

Upvotes: 30

Rahul
Rahul

Reputation: 4331

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

Upvotes: 8

Faisal Faraj
Faisal Faraj

Reputation: 607

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 .

Upvotes: 5

Related Questions