Flutter图标数据获取插件flutter_icon_data的使用

Flutter图标数据获取插件flutter_icon_data的使用

English | 简体中文

flutter_icons

pub package

为Flutter提供的可定制图标插件，灵感来源于react-native-vector-icons。

注意事项

  1. `v1.0.0`版本有重大API更改，请谨慎升级。
  2. 以数字开头的图标名称会添加前缀`$`。
  3. 带有Dart关键字的图标名称会在末尾添加下划线`_`。

支持的图标集

浏览所有图标集。

  • Ant Design（由AntFinance提供，共297个图标）
  • Entypo（由Daniel Bruce提供，共411个图标）
  • Evil Icons（由Alexander Madyankin & Roman Shamin提供，v1.10.1，共70个图标）
  • Feather（由Cole Bemis & 贡献者提供，v4.7.0，共266个图标）
  • Font Awesome（由Dave Gandy提供，v4.7.0，共675个图标）
  • Font Awesome 5（由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个图标）
  • Simple Line Icons（由Sabbir & 贡献者提供，v2.4.1，共189个图标）
  • Weather Icons（由erikflowers提供，v2.0.10，共596个图标）

使用方法

要使用此插件，在项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter_icons: ^x.x.x

然后运行flutter pub get来安装依赖。

小部件

IconToggle

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

示例代码

以下是一个完整的示例，展示如何在Flutter项目中使用flutter_icons插件。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('flutter_icons 示例')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 使用早期版本的写法
              Icon(AntDesign.stepforward),
              Icon(Ionicons.ios_search),
              Icon(FontAwesome.glass),
              Icon(MaterialIcons.ac_unit),
              Icon(FontAwesome5.address_book),
              Icon(FontAwesome5Solid.address_book),
              Icon(FontAwesome5Brands.$500px),

              SizedBox(height: 20),

              // 使用1.1.0及以上版本的写法
              Icon(FlutterIcons.stepforward_ant), // Ant Design 图标
              Icon(FlutterIcons.html5_faw),       // Font Awesome 图标
              Icon(FlutterIcons.home_mco),        // Material Community 图标
              Icon(FlutterIcons.android_mdi),     // Material 图标
            ],
          ),
        ),
      ),
    );
  }
}

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

步骤 1

执行以下命令激活工具：

pub global activate split_icon

步骤 2

在项目的pubspec.yaml文件中添加需要保留的字体：

flutter_icons:
  android: "true"
  ios: "true"
  image_path: "assets/icon.png"
  fonts:
    - asset: fonts/ant.ttf       # Ant Design Icons
    - asset: fonts/ent.ttf       # Entypo Icons
    - asset: fonts/fea.ttf       # Feather Icons
    - asset: fonts/faw.ttf       # Font Awesome Icons
    - asset: fonts/faw5.ttf      # Font Awesome 5 Regular
    - asset: fonts/faw5s.ttf     # Font Awesome 5 Solid
    - asset: fonts/faw5b.ttf     # Font Awesome 5 Brands
    - asset: fonts/fou.ttf       # Foundation Icons
    - asset: fonts/ion.ttf       # Ionicons Icons
    - asset: fonts/mco.ttf       # Material Community Icons
    - asset: fonts/mdi.ttf       # Material Icons
    - asset: fonts/oct.ttf       # Octicons Icons
    - asset: fonts/sli.ttf       # Simple Line Icons
    - asset: fonts/zoc.ttf       # Zocial Icons
    - asset: fonts/wea.ttf       # Weather Icons

保存后运行以下命令生成字体文件：

flutter pub run flutter_icons

更多关于Flutter图标数据获取插件flutter_icon_data的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


flutter_icon_data 是一个用于在 Flutter 应用中获取图标数据的插件。它允许你轻松地使用各种图标库中的图标，如 Material Icons、Font Awesome、Ionicons 等。通过这个插件，你可以直接在代码中引用图标，而不需要手动下载或管理图标资源。

安装 flutter_icon_data

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

dependencies:
  flutter:
    sdk: flutter
  flutter_icon_data: ^1.0.0

然后运行 flutter pub get 来安装依赖。

使用 flutter_icon_data

flutter_icon_data 提供了多个类来访问不同图标库中的图标。以下是一些常用的图标库及其对应的类：

  • FlutterIconData.materialIcons：Material Icons
  • FlutterIconData.fontAwesome：Font Awesome
  • FlutterIconData.ionicons：Ionicons
  • FlutterIconData.antDesign：Ant Design Icons
  • FlutterIconData.evilIcons：Evil Icons
  • FlutterIconData.entypo：Entypo
  • FlutterIconData.foundation：Foundation Icons
  • FlutterIconData.octicons：Octicons
  • FlutterIconData.zocial：Zocial
  • FlutterIconData.simpleLineIcons：Simple Line Icons
  • FlutterIconData.feather：Feather Icons
  • FlutterIconData.weatherIcons：Weather Icons

示例代码

以下是一个简单的示例，展示如何在 Flutter 应用中使用 flutter_icon_data 来显示 Material Icons 和 Font Awesome 图标：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Icon Data Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 使用 Material Icons
              Icon(FlutterIconData.materialIcons(0xe87d)), // 0xe87d 是 Material Icons 中的 "home" 图标
              SizedBox(height: 20),
              // 使用 Font Awesome
              Icon(FlutterIconData.fontAwesome(0xf015)), // 0xf015 是 Font Awesome 中的 "home" 图标
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部