Flutter图标无法显示

Question

我正在尝试完成这个Flutter Code Lab，但是我的应用程序中没有显示图标。 但它们出现在Android Studio代码中： 我已经在pubspec.yaml文件中添加了库。

name: startup_namer
description: A new Flutter application.

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^0.1.0
  english_words: ^3.1.0

但结果是这样的：

我的main.dart文件如下：

// Add the heart icons to the ListView.

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';


void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {

   ..... 

  Widget _buildRow(WordPair pair) {
    final bool alreadySaved = _saved.contains(pair);

    return new ListTile(
      title: new Text(
        pair.asPascalCase,
        style: _biggerFont,
      ),
      trailing: new Icon(
        alreadySaved ? Icons.favorite : Icons.favorite_border,
        color: alreadySaved ? Colors.red : null,
        size: 22.0,
      ),
      onTap: () {      
        setState(() {
          if (alreadySaved) {
            _saved.remove(pair);
          } else {
            _saved.add(pair);
          }
        });
      },
    );
  }
}

我原来以为是因为我使用了iOS模拟器，但当我尝试使用Android模拟器时，结果是相同的。

- MeLean

---

你可以展示一下图标周围的更多代码吗？ - Tree

抱歉，我太糊涂了，没有提供我的 .dart 文件 :)，对不起。 - MeLean

我看不出任何问题。首先，我会删除颜色属性，看看是否有效。然后，我会将图标放在其他位置，并使用相同的属性来查看问题是否在ListTile中。告诉我结果如何。 - Tree

你的 pubspec.yaml 文件中的 Flutter 部分是否包含了 uses-material-design: true ？ - Rémi Rousselet

@RémiRousselet 不，那就是问题所在。谢谢。 - MeLean

Answer 1

你需要在pubspec.yaml文件中设置uses-material-design: true，以便将图标包含在应用程序中。

- Danny Tuppeny

Answer 2

在我的情况下，我在pubspec.yaml文件中写入uses-material-design: true。我可以通过重新启动Android模拟器来解决这个问题。您也可以尝试从您的模拟器中卸载旧版本并安装新版本。虽然这是有点奇怪的行为，但对我而言有效。

- Rahul Sharma

---

奇怪但有所帮助。 - divaPrajapati09

我也遇到过这种情况，在开发阶段重新启动并再次工作是可以的，但我刚刚发布到应用商店，图标没有渲染:/ - Julios_Rodmax

Answer 3

热重载不显示资源更改。在Android Studio的顶部操作菜单栏中按下红色方形停止按钮，然后再次运行应用程序即可。 它有效。

- yubaraj poudel

---

谢谢，我之前没有意识到这一点，它帮助我修复了错误！ - Krishnanshu Gupta

Answer 4

请将以下内容添加到您的pubspec.yaml文件中：

flutter: 
  uses-material-design: true

花了我一段时间才弄清楚，根据上面的答案，uses-material-design 是 flutter 的属性，而不是根的属性。

- cosbor11

Answer 5

请尝试：

1. 停止应用程序
2. 在您的应用目录中运行flutter clean
3. 从模拟器/仿真器/设备中删除应用程序
4. 重新构建和部署应用程序。

- user3183225

Answer 6

我假设我们正在谈论 flutter_icons 包？

我不得不完全关闭应用程序并重新安装它，然后它们开始为我工作。不确定为什么热重载没有发挥作用。

- Michael Peterson

Answer 7

如果您正在使用FlutterIcons库，请确保您在pubspec.yaml中的font-family与my_flutter_app_icons.dart文件中声明的内容匹配。"Original Answer"的翻译是"最初的回答"。

- Richard Bonneau

Answer 8

只需从您正在使用的模拟器/物理设备中删除应用程序，然后重新构建应用程序即可。

对我有效，肯定也适用于您。

- DANISH MULTANI

Answer 9

通过将正确的路径添加到字体文件夹中，解决了图标变成中文字符的问题。请提供适当的缩进来指定您字体文件夹的正确路径：

• 运行Flutter Clean
• 从测试设备/模拟器中删除构建
• 运行应用程序

- Fasih Ud Din

Answer 10

您需要在pubspec.yaml中设置uses-material-design: true，以便将图标包含在应用程序中。

请确保在pubspec.yaml文件的flutter部分中有一个uses-material-design: true条目。它允许您使用预定义的一组Material图标。许多Material Design小部件需要位于MaterialApp内才能正确显示，以继承主题数据。

- Tushar Nikam