在 Flutter 应用中使用 IconFont

前端

2023-10-19 22:47:34

使用 IconFont 图标库美化您的 Flutter 应用

1. 准备工作

1.1. 创建 IconFont 项目

首先，前往阿里巴巴矢量图标库官网，创建一个新项目。在这里，您可以选择或上传所需的图标（SVG 或 PNG 格式均可），并自定义其外观（颜色、大小、阴影等）。完成后，点击“下载”按钮，将图标库以字体格式保存到您的本地计算机。

1.2. 将 IconFont 文件添加到 Flutter 项目

接下来，在 Flutter 项目的根目录下创建两个文件夹：“assets”和“fonts”。将下载的 iconfont.ttf 字体文件复制到 “fonts” 文件夹。

在 pubspec.yaml 文件中，添加以下依赖项：

dependencies:
  flutter_svg: ^1.1.0

运行 flutter pub get 命令安装依赖项。

2. 使用 IconFont 图标

2.1. 创建一个 Flutter 图标组件

在您的 Dart 文件中，创建一个名为 IconFont 的 StatelessWidget 组件，它接受图标名称、大小和颜色作为参数。该组件使用 flutter_svg 库加载并显示图标：

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

class IconFont extends StatelessWidget {
  final String iconName;
  final double size;
  final Color color;

  const IconFont({
    required this.iconName,
    this.size = 24.0,
    this.color = Colors.black,
  });

  @override
  Widget build(BuildContext context) {
    return SvgPicture.asset(
      'assets/fonts/iconfont.ttf#icon-$iconName',
      width: size,
      height: size,
      color: color,
    );
  }
}

2.2. 在 Flutter 应用中使用图标组件

在您的 main.dart 文件中，导入必要的库并创建 MyApp 类，如下所示：

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'IconFont Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('IconFont Demo'),
        ),
        body: Center(
          child: IconFont(iconName: 'home', size: 48.0, color: Colors.blue),
        ),
      ),
    );
  }
}