Flutter图标库插件icons_flutter的使用

icons_flutter #

icons_flutter插件为Flutter应用程序提供了超过14000个额外的图标。

注意 #

• 图标名称以数字开头的，前面会加上 $ 前缀
• 图标名称与Dart关键字冲突的，会在后面添加 _ 后缀

包含的图标集 #

以下是部分包含的图标集及其来源：

• AntDesign：由AntFinance提供（297个图标）
• Brandico：由Vitaly Puzrin提供（44个图标）
• Elusive：由Aristeides Stathopoulos提供（270个图标）
• Entypo：由Daniel Bruce提供（411个图标）
• EvilIcons：由Alexander Madyankin & Roman Shamin提供（70个图标）
• Feather：由Cole Bemis & Contributors提供（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个图标）

更多图标集请参考官方文档。

使用方法 #

要在项目中使用此插件，请在pubspec.yaml文件中添加icons_flutter作为依赖项。

dependencies:
  icons_flutter: ^最新版本号

然后运行flutter pub get来获取并安装插件。

示例代码 #

以下是一个完整的示例代码，展示了如何在Flutter应用中使用icons_flutter插件：

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

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    final orientation = MediaQuery.of(context).orientation;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: GridView.builder(
          itemCount: initList().length,
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: orientation == Orientation.portrait ? 4 : 6,
          ),
          itemBuilder: (context, index) => displayIcon(initList()[index]),
        ),
      ),
    );
  }

  List<IconData> initList() => <IconData>[
        AntDesign.stepforward,
        Ionicons.ios_search,
        FontAwesome.glass,
        MaterialIcons.ac_unit,
        FontAwesome5.address_book,
        FontAwesome5Solid.address_book,
        FontAwesome5Brands.$500px,
        FlutterIcons.$500px_ent,
        FlutterIcons.$500px_faw5d,
        WeatherIcons.wi_alien,
        WeatherIcons.wi_cloud,
        WeatherIcons.wi_day_rain,
        Brandico.facebook_1,
        MfgLabs.heart,
        Linecons.heart,
        RpgAwesome.ammo_bag,
        Maki.aboveground_rail
      ];

  Widget displayIcon(IconData icon) {
    return InkWell(
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute<void>(
            builder: (BuildContext context) {
              return GestureDetector(
                onTap: () => Navigator.of(context).pop(),
                child: Container(
                  color: Colors.white,
                  alignment: Alignment.center,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Icon(icon, size: 100),
                    ],
                  ),
                ),
              );
            },
          ),
        );
      },
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[Icon(icon)],
      ),
    );
  }
}

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

步骤1

执行命令：

pub global activate split_icon

步骤2

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

icons_flutter:
  includes:
    - ant
    - mco
    # 添加其他需要的字体

步骤3

在项目目录下执行命令：

split_icon

通过以上步骤，你可以确保项目中只包含实际使用的字体，从而减小应用包的大小。