Flutter Web 显示黑白表情符号

Question

在 ios/android 应用程序中，表情符号可以正确显示。但使用任何网络浏览器（例如 Chrome），表情符号都会以黑白显示。我也尝试了不同的字体系列，但结果相同。

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

Answer 1

由于彩色表情符号字体较大（~24MB），Flutter 团队在 Flutter 3.10.0 中将彩色表情符号作为可选功能（参考）。

要启用它，请useColorEmoji在文件中初始化引擎时将该标志设置为 true index.html：

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

Answer 2

现在，这是颤振引擎的问题。它可能在这里介绍https://github.com/flutter/engine/commit/7406fd81865292772689a1bbbc2239c665ba07d8

最初的问题看起来像 flutter 中提供的字体不支持表情符号字符 (.AppleSystemUIFont)，因此使用第一个后​​备字体，即 NatoEmoji。

临时解决方案是将 Apple Color Emoji 字体文件作为资源提供给 Web 应用程序。您可以在此处找到该文件“/System/Library/Fonts/Apple Color Emoji.ttc”您可以将其复制到应用程序的资产中。一旦完成，

...
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

然后在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,
              ),
            );
          }),
        ),
      ),
    );
  }
}

输出：

Answer 3

使用来自 google 的 Noto Color Emoji（按照以下步骤操作）：

1. 下载字体下载Noto Color Emoji

2. 将其添加到 pubspec.yaml `flutter: fonts:

   • 系列：Noto Color Emoji 字体：
     • 资产：资产/字体/NotoColorEmoji-Regular.ttf`

3. 在 TextStyle 类中像这样使用它TextStyle( fontFamilyFallbackm: [ 'Apple Color Emoji', 'Noto Color Emoji', ], )

与此不同的是尝试：

。删除网页文件夹

。使用命令更新flutterflutter upgrade

。运行命令flutter create .