如何向您的Flutter应用程序添加自定义图标

当你想为你的应用程序添加一些风格时，你可能会寻找一些方法来使你的用户界面脱颖而出。

无论是使用特定的字体还是不同的色调，你都想让用户感到被你的用户界面所吸引。

定制的一个方法是更新你的图标。如果你是一个移动开发者，无论你开发的是什么平台，都有一个直接的过程来给你的应用程序添加图标。

在Flutter中，这并不复杂，但有一些事情你应该注意，这样你就不会犯耗时的错误。

如何定制应用程序启动器图标

与其使用Flutter提供的通用应用程序图标，你可以创建你自己的。要做到这一点，我们将需要使用一个名为Flutter Launcher Icons的软件包。我们将一步一步地创建一个。

这是你的启动器图标的默认样子：

让我们假设我们想把这张图片作为我们的应用程序启动器图标：

首先，在项目中的assets文件夹下添加你想用作图标的图片（如果你没有assets文件夹，就创建一个）：

我们的图标在项目中的位置

然后在你的pubspec.yaml文件中的dev_dependencies下添加这个依赖：

dev_dependencies:
  flutter_launcher_icons: "^0.9.2"

在你的pubspec.yaml文件中加入这个配置：

flutter_icons:
  android: "launcher_icon"
  ios: true
  image_path: "assets/doughnut.png"

flutter_icons 配置有几个键来改变要渲染的内容和哪个平台：

• Android/iOS - 指定你要为哪个平台生成图标。你也可以写文件名而不是true。
• image_path - 你想制作成应用程序启动器图标的资产的路径。例如，"assets/doughnut.png"。

还有更多可用的配置，但我们不会在这里深入研究它们。你可以在这里找到更多。

现在，在终端运行flutter pub get ，或者点击Pub进入IDE。

在终端中运行下面的命令：

flutter pub run flutter_launcher_icons:main

这将生成应用程序的启动器图标

运行你的应用程序，你应该看到启动器的图标已经改变：

如何在Flutter中生成自定义图标

我们将能够通过FlutterIcon.com生成自定义图标。它允许我们要么：

• 上传一个SVG，将其转换为一个图标
• 从一组不同的图标包中选择大量的图标

☝️有一个叫FlutterIcon 的包，它有所有显示的图标，但由于它的尺寸很重，我建议只选择你需要的图标，不要使用它。

让我们来演示一下如何使用这个网站将自定义图标导入您的应用程序中。

想象一下，我们的应用程序中有下面的表格。

你可以看到，我们为每个TextFormField使用了图标。下面是第一个TextFormField的代码。

TextFormField(
  controller: pillNameTextEditingController,
  decoration: const InputDecoration(
      border: OutlineInputBorder(),
      hintText: 'What is the pill\'s name?',
      prefixIcon: Icon(Icons.title)
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter a pill name';
    }
    return null;
  }
)

我们把第一个TextFormField的图标改成更相关的东西如何？

在FlutterIcon.com上：

• 选择您要使用的图标/上传一个SVG文件
• 给您的图标类取一个有意义的名字（我们将称我们的类为CustomIcons）
• 按下载

在你下载的.zip文件夹中，有几个文件：

• 一个字体文件夹，里面有一个TTF文件，文件名是你选择的类的名字
• 一个config.json文件，用来记住你选择的图标。
• 一个带有你选择的类名称的dart类。

在你的项目中，将.ttf文件导入根目录下一个名为字体的文件夹。它应该看起来像这样。

将.dart类放在你的lib文件夹内。如果你看一下dart文件，你会看到类似的东西（如果你选择了一个以上的图标来下载，你可能会看到更多的IconData对象）：

import 'package:flutter/widgets.dart';

class CustomIcons {
  CustomIcons._();

  static const _kFontFam = 'CustomIcons';
  static const String? _kFontPkg = null;

  static const IconData pill = IconData(0xea60, fontFamily: _kFontFam, fontPackage: _kFontPkg);
}

在你的pubspec.yaml文件中加入以下内容：

fonts:
      - family: CustomIcons
        fonts:
          - asset: fonts/CustomIcons.ttf

在终端运行flutter pub get ，或点击Pub进入IDE。

到你想使用你的自定义图标的地方，像这样使用：

n.dart
TextFormField(
  controller: pillNameTextEditingController,
  decoration: const InputDecoration(
      border: OutlineInputBorder(),
      hintText: 'What is the pill\'s name?',
      prefixIcon: Icon(CustomIcons.pill)
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Please enter a pill name';
    }
    return null;
  }
)

Flutter中自定义图标的故障排除

如果你的自定义图标显示为带X的方块，那就不对了。你也可能在日志中看到以下警告。

Warning: No fonts specified for font CustomIcons
Warning: Missing family name for font.

这可能是由于几个原因：

• 确保你的pubspec.yaml文件是有效的。意思是没有多余的空格、缩进等。你可以用这个 工具来做。
• 确保你在pubspec.yaml文件中正确引用了你的字体。
• 确保你已经将你的.ttf文件放置在你的项目根目录下的字体 目录中（而不是资产目录中）。
• 卸载你的应用程序并在你的设备上重新安装它。

如果你想看看一个使用这两种类型图标的真实应用程序，你可以在这里查看。