Emoji 不显示在 Flutter web 中，它们是黑白的

Question

我正在尝试在 flutter 应用程序上打印表情符号，但我没有看到表情符号本身，而是看到这些表情符号的轮廓（下面分享屏幕截图）。

我有两个文件

coursedata.dart

和

coursedescription.dart

，课程数据文件包含我将在课程描述文件中显示的课程信息。

这是我运行应用程序时看到的。以下是我期望的输出

🥪西兰花和玉米英尺长

🥪 打开奶酪菠菜吐司

🥪 墨西哥奶酪袋

🥪孟买吐司

🥪 冷芝士三明治

🥪素芝士烤三明治

🥪 Paneer Tikka 开放式三明治

🥪 芝士爆裂披萨三明治

🥪 芝士Toofani三明治

🥪绿巨人三明治

这是

coursedata.dart

中的课程列表之一

Course(
      id: '3',
      title: 'Cafe Style Sandwiches',
      time: '11:00AM - 3:00PM',
      imagePath: 'Cafe_Style_Sandwiches3.png',
      noOfItems: '10',
      items: '''🥪 Broccoli and Corn Footlong 
🥪 Open Cheese Spinach Toasties 
🥪 Mexican Cheese Pockets
🥪 Mumbai Toast
🥪 Chilly Cheese Sandwich
🥪 Veg Cheese Grilled Sandwich
🥪 Paneer Tikka Open Sandwich
🥪 Cheese Burst Pizza Sandwich
🥪 Paneer Toofani Sandwich
🥪 Hulk Sandwich''',
      imagePaths: [],
      language: 'English',
      certificateofCompletion: '', //Show Sample
      highlights: '',
      description:
          'Join our Sandwich-Making course to learn the tricks of the trade. From old-school favorites to new and exciting creations, you will become a sandwich pro, making delicious flavors that everyone will love.',
      price: 'Rs.2000'),

以下是我的容器，其中包含

coursedescription.dart

的列表

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

我该怎么做才能以这种方式获取表情符号？

Answer 1

看来问题是在这个GitHub问题中找到的。

解决方案将是添加：

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

您的

index.html

文件位于

<project-dir/web/index.html

。

所以，将您的

index.html

更改为：

onEntrypointLoaded: function(engineInitializer) {
          engineInitializer.initializeEngine().then(function(appRunner) {
            useColorEmoji: true,
            appRunner.runApp();
          });

致：

onEntrypointLoaded: function(engineInitializer) {
          engineInitializer.initializeEngine(
          {useColorEmoji:true} 
          ).then(function(appRunner) {
            useColorEmoji: true,
            appRunner.runApp();
          });

图片来自Chrome：

之前

之后