Flutter Web中Emoji仅显示黑白轮廓，如何正常显示彩色Emoji？

你当前用Text组件直接渲染带Emoji的字符串时，出现了黑白轮廓样式，这是因为默认系统字体可能不支持彩色Emoji渲染，以下是两种可行的解决办法：

方法一：指定支持彩色Emoji的字体 #

1. 准备字体文件：下载Google的「Noto Color Emoji」字体，将其放入项目的assets/fonts/目录（没有该目录就新建）。
2. 配置pubspec.yaml：在文件中添加字体声明：

flutter:
  assets:
    # 保留原有资源配置...
  fonts:
    - family: NotoColorEmoji
      fonts:
        - asset: assets/fonts/NotoColorEmoji.ttf

3. 修改Text组件样式：在渲染课程列表的Text中指定该字体：

Container(
  margin: const EdgeInsets.only(right: 15, left: 15),
  alignment: Alignment.bottomLeft,
  child: Text(
    course.items,
    style: TextStyle(fontFamily: 'NotoColorEmoji'),
  ),
)

方法二：使用第三方emoji处理包 #

使用emoji_flutter包可以更便捷地处理彩色Emoji显示：

1. 添加依赖：在pubspec.yaml中添加：

dependencies:
  emoji_flutter: ^2.0.0 # 建议使用最新版本

2. 安装依赖：执行flutter pub get命令。
3. 替换Text组件：导入包后用EmojiText替代原有的Text：

import 'package:emoji_flutter/emoji_flutter.dart';

// ...

Container(
  margin: const EdgeInsets.only(right: 15, left: 15),
  alignment: Alignment.bottomLeft,
  child: EmojiText(course.items),
)

这两种方法都能让Emoji显示为你期望的彩色样式，方法一不需要依赖第三方包，方法二更省心且支持更多Emoji特性。

内容的提问来源于stack exchange，提问作者Ayush V Jain