Flutter图标生成插件flutter_icons的使用

简体中文

flutter_icons #

为Flutter定制的图标库，灵感来源于react-native-vector-icons。

注意事项 #

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

包含的图标集 #

浏览所有图标集：React Native Vector 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个图标）
• FontAwesome 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个图标）
• SimpleLineIcons，由Sabbir & 贡献者提供（v2.4.1，189个图标）
• Weather Icons，由erikflowers提供（v2.0.10，596个图标）

使用方法 #

要使用此插件，在你的pubspec.yaml文件中添加flutter_icons作为依赖项。

小部件 #

IconToggle #

示例 #

// 导入包
import 'package:flutter_icons/flutter_icons.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Icons'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, 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: [
            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)
          ],
        ),
      ),
    );
  }
}

在1.0.0版本中，你可以这样使用：

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)

从1.1.0版本开始，提供了FlutterIcons类来访问所有图标。图标名称基于原始名称添加了图标集的缩写作为后缀。以下是一些例子：

Icon(FlutterIcons.stepforward_ant)
Icon(FlutterIcons.html5_faw)

在1.0.0之前的版本中，可以这样使用：

Icon(Ionicons.getIconData("ios-search"));
Icon(AntDesign.getIconData("stepforward"));
Icon(FontAwesome.getIconData("glass"));
Icon(MaterialIcons.getIconData("ac-unit"));
Icon(FontAwesome5.getIconData("address-book"));
Icon(FontAwesome5.getIconData("address-book", weight: IconWeight.Solid));
Icon(FontAwesome5.getIconData("500px", weight: IconWeight.Brand));