Flutter图标生成插件flutter_icons

Flutter图标生成插件flutter_icons_plus的使用

flutter_icons_plus 是一个可定制的图标库，灵感来源于 react-native-vector-icons。

注意事项

这是 flutter_icons 包的改进版本，支持空安全。
感谢原作者的贡献。

内置图标集

AntDesign：由 AntFinance 提供（297个图标）
Entypo：由 Daniel Bruce 提供（411个图标）
EvilIcons：由 Alexander Madyankin 和 Roman Shamin 提供（v1.10.1，70个图标）
Feather：由 Cole Bemis 和贡献者提供（v4.7.0，266个图标）
FontAwesome：由 Dave Gandy 提供（v4.7.0，675个图标）
FontAwesome5：由 Fonticons, Inc. 提供（v5.7.0，1500个图标（免费））
Foundation：由 ZURB, Inc. 提供（v3.0，283个图标）
Ionicons：由 Ben Sperry 提供（v4.2.4，696个图标）
MaterialIcons：由 Google, Inc. 提供（v3.0.1，932个图标）
MaterialCommunityIcons：由 MaterialDesignIcons.com 提供（v4.0.96，4416个图标）
Octicons：由 Github, Inc. 提供（v8.0.0，177个图标）
Zocial：由 Sam Collins 提供（v1.0，100个图标）
SimpleLineIcons：由 Sabbir 和贡献者提供（v2.4.1，189个图标）
WeatherIcons：由 erikflowers 提供（v2.0.10，596个图标）

使用方法

要在项目中使用该插件，首先在 pubspec.yaml 文件中添加依赖项：

dependencies:
  flutter_icons_plus: ^最新版本号

然后执行 flutter pub get 命令来获取新的依赖项。

Widget

IconToggle

属性名	描述
selectedIconData	当值为 `true` 时显示的图标
unselectedIconData	当值为 `false` 时显示的图标
activeColor	当值为 `true` 时显示的图标颜色
inactiveColor	当值为 `false` 时显示的图标颜色
value	是否选中此 `IconToggle`
onChanged	在 `IconToggle` 的值应改变时调用
duration	从选中图标到未选中图标的过渡时间
reverseDuration	从未选中图标到选中图标的过渡时间
transitionBuilder	选中图标和未选中图标之间的过渡动画函数

示例代码

以下是一个简单的示例，展示如何在 Flutter 应用程序中使用 flutter_icons_plus。

import 'package:flutter/material.dart';
import 'package:flutter_icons_plus/flutter_icons_plus.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: 'Flutter Icons Plus',
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const MyHomePage(title: 'Flutter Icons Plus'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Icon(FlutterIcons.stepForwardAnt),
            Icon(FlutterIcons.iosSearchIon),
            Icon(FlutterIcons.glassCheersFaw5s),
            Icon(FlutterIcons.acUnitMdi),
            Icon(FlutterIcons.addressBookFaw),
            Icon(FlutterIcons.addressBookFaw5s),
            Icon(FlutterIcons.$500pxEnt),
          ],
        ),
      ),
    );
  }
}

如何只保留项目中使用的字体

执行命令：
```
pub global activate split_icon
```
在项目的 pubspec.yaml 文件中添加要保留的字体：
```
flutter_icons:
  includes:
    - ant
    - mco
```
在项目目录中执行命令：
```
split_icon
```

更多关于Flutter图标生成插件flutter_icons_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

yibo5220 1楼•4 天前

更多关于Flutter图标生成插件flutter_icons_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用flutter_icons_plus插件来生成图标的详细代码案例。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加flutter_icons_plus依赖。

dependencies:
  flutter:
    sdk: flutter
  flutter_icons_plus: ^x.y.z  # 请替换为最新版本号

然后运行以下命令来安装依赖：

flutter pub get

2. 配置`flutter_icons_plus`

接下来，你需要创建一个配置文件来指定你希望生成的图标集。在项目的根目录下创建一个名为flutter_icons.yaml的文件，并添加以下内容：

flutter_icons:
  image_path: "assets/icon/app_icon.png"  # 你的图标源文件路径
  android: true         # 是否为Android生成图标
  ios: true             # 是否为iOS生成图标
  web: true             # 是否为Web生成图标
  remove_alpha_ios: true # 是否移除iOS图标的alpha通道
  adaptive_icon_background: "#FFFFFF" # Android自适应图标背景色
  adaptive_icon_foreground: "assets/icon/foreground.png" # Android自适应图标前景图

3. 运行图标生成命令

配置完成后，你可以运行以下命令来生成图标：

flutter pub run flutter_icons_plus:main

4. 在代码中使用生成的图标

一旦图标生成完成，你就可以在代码中引用它们了。例如，在pubspec.yaml中引用生成的图标资源：

flutter:
  assets:
    - assets/icons/  # 确保路径正确

然后，在你的Dart代码中，你可以使用这些图标。例如，在AppBar中使用生成的图标：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Icons Plus Demo'),
          iconTheme: IconThemeData(
            color: Colors.white,
          ),
          leading: IconButton(
            icon: ImageIcon(
              AssetImage('assets/icons/ic_launcher_foreground.png'), // 确保文件名正确
            ),
            onPressed: () { Navigator.pop(context); },
          ),
        ),
        body: Center(
          child: Text('Hello, Flutter Icons Plus!'),
        ),
      ),
    );
  }
}

注意事项

确保你的图标源文件（如app_icon.png）位于指定的路径下。
确保flutter_icons.yaml中的配置正确无误。
在使用生成的图标时，注意引用正确的资源路径和文件名。

通过以上步骤，你就可以在Flutter项目中使用flutter_icons_plus插件来生成和引用图标了。

Flutter图标生成插件flutter_icons_plus的使用