Flutter 添加外部图标 - Dart

在 Flutter 中，添加外部图标是一件相对容易的事情。Flutter 支持从本地、assets 和网络中导入图标。在这篇教程中，我们将介绍如何添加外部图标以及如何在 Flutter 中使用它们。

第一步：下载图标

首先，我们需要先下载对应的图标文件。我们可以从以下网站获取免费的图标素材：

• Flaticon
• Material Design Icons
• Icons8

也可以从其他的图标网站或是自己设计的图标文件。

第二步：导入图标

在 Flutter 中，我们可以使用 flutter_svg 库来导入和显示 SVG 图标。要使用 flutter_svg 库，我们需要在 pubspec.yaml 文件中添加如下依赖：

dependencies:
  flutter_svg: ^0.18.0

然后，我们可以通过以下方式导入 SVG 图标：

1. 从本地文件系统中导入：

import 'package:flutter_svg/flutter_svg.dart';

// 导入本地文件
SvgPicture.asset('assets/icons/icon.svg');

2. 从网络中导入：

import 'package:flutter_svg/flutter_svg.dart';

// 从网络中导入
SvgPicture.network('https://example.com/icon.svg');

3. 从 assets 中导入：

首先，在 pubspec.yaml 文件中添加以下代码：

flutter:
  assets:
    - assets/icons/

然后，可以使用 AssetImage 类从 assets 中导入 SVG 图标：

import 'package:flutter_svg/flutter_svg.dart';

// 从 assets 中导入
SvgPicture.asset('assets/icons/icon.svg');

此处需要注意，导入的路径是相对于 pubspec.yaml 文件的。

第三步：使用图标

导入之后，我们就可以在 Flutter 应用程序中使用图标了。像使用其他 Widget 一样，我们可以将图标添加到任何 StatefulWidget 或 StatelessWidget 中。

下面是一个示例：

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 外部图标'),
      ),
      body: Center(
        child: SvgPicture.asset(
          'assets/icons/icon.svg',
          width: 48,
          height: 48,
        ),
      ),
    );
  }
}

在上面的代码中，我们将 SVG 图标添加到中心部分的 Container 中，并指定了它的 width 和 height。

结论

到这里，我们已经学会了如何在 Flutter 应用中添加外部图标。Flutter 的 flutter_svg 库提供了灵活的导入和显示图标的方式，并且通常情况下非常容易使用。

参考

• flutter_svg documentation