Flutter图标生成插件 fluttericon 的使用

fluttericon 是一个包含15种流行的免费和开源web字体图标的Flutter包。它主要用于开发过程中帮助识别和测试图标，不建议在生产环境中直接使用，因为它的体积较大。对于生产环境，推荐使用 FlutterIcon 来定制自己的图标集。

包含的图标集

以下是 fluttericon 包中包含的所有图标集：

• Brandico
• Elusive
• Entypo
• Font Awesome (4 和 5)
• Fontelico
• Iconic
• Linearicons Free
• Linecons
• Maki
• Meteocons
• MfgLabs
• ModernPictograms
• Octicons
• RPGAwesome
• Typicons
• WebSymbols
• Zocial

请注意，每个字体集都有其版权信息，请尊重并遵守。

使用方法

只需导入所需的图标集并像平常一样使用 IconData 即可。以下是一个简单的示例：

import 'package:fluttericon/typicons_icons.dart';
import 'package:fluttericon/fontelico_icons.dart';
import 'package:fluttericon/linecons_icons.dart';

final myIcons = const <Widget>[
    const Icon(Typicons.attention),
    const Icon(Fontelico.emo_wink),
    const Icon(Linecons.globe),
];

示例 Demo

下面是一个完整的示例项目，展示了如何使用 fluttericon 包中的图标，并通过搜索功能来查找特定图标。

/* Thanks to font_awesome_flutter and @brianegan for this example gallery
* https://github.com/fluttercommunity/font_awesome_flutter/blob/master/example/lib/main.dart
*/

import 'package:flutter/material.dart';
import 'package:fluttericon/typicons_icons.dart';

// 假设 all_icons.dart 文件包含了所有可用的图标列表
import 'all_icons.dart'; // 这个文件需要你自己创建或从示例中获取

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

class FontAwesomeGalleryApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Font Awesome Flutter Gallery',
      theme: ThemeData.light().copyWith(
        iconTheme: IconThemeData(size: 36.0, color: Colors.black87),
        textTheme: TextTheme(
          bodyText2: TextStyle(fontSize: 16.0, color: Colors.black87),
        ),
      ),
      home: FontAwesomeGalleryHome(),
    );
  }
}

class FontAwesomeGalleryHome extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => FontAwesomeGalleryHomeState();
}

class FontAwesomeGalleryHomeState extends State<FontAwesomeGalleryHome> {
  var _searchTerm = "";
  var _isSearching = false;

  @override
  Widget build(BuildContext context) {
    final filteredIcons = allIcons
        .where((icon) =>
            _searchTerm.isEmpty ||
            icon.name.toLowerCase().contains(_searchTerm.toLowerCase()))
        .toList();
    final orientation = MediaQuery.of(context).orientation;

    return Scaffold(
      appBar: _isSearching ? _searchBar(context) : _titleBar(),
      body: GridView.builder(
        itemCount: filteredIcons.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: orientation == Orientation.portrait ? 4 : 6,
        ),
        itemBuilder: (context, index) {
          final icon = filteredIcons[index];

          return InkWell(
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute<Null>(
                  builder: (BuildContext context) {
                    return GestureDetector(
                      onTap: () {
                        Navigator.of(context).pop();
                      },
                      child: Container(
                        color: Colors.white,
                        alignment: Alignment.center,
                        child: Hero(
                          tag: icon,
                          child: Icon(
                            icon.iconData,
                            size: 100,
                          ),
                        ),
                      ),
                    );
                  },
                ),
              );
            },
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Hero(tag: icon, child: Icon(icon.iconData)),
                Container(
                  padding: EdgeInsets.only(top: 16.0),
                  child: Column(
                    children: <Widget>[
                      Text(icon.family),
                      Text(icon.name),
                    ],
                  ),
                ),
              ],
            ),
          );
        },
      ),
    );
  }

  AppBar _titleBar() {
    return AppBar(
      title: Text("Fluttericon Gallery"),
      actions: [
        IconButton(
            icon: Icon(Typicons.search),
            onPressed: () {
              ModalRoute.of(context)?.addLocalHistoryEntry(
                LocalHistoryEntry(
                  onRemove: () {
                    setState(() {
                      _searchTerm = "";
                      _isSearching = false;
                    });
                  },
                ),
              );

              setState(() {
                _isSearching = true;
              });
            })
      ],
    );
  }

  AppBar _searchBar(BuildContext context) {
    return AppBar(
      leading: IconButton(
        icon: Icon(Typicons.left_open),
        onPressed: () {
          setState(
            () {
              Navigator.pop(context);
              _isSearching = false;
              _searchTerm = "";
            },
          );
        },
      ),
      title: TextField(
        onChanged: (text) => setState(() => _searchTerm = text),
        autofocus: true,
        style: TextStyle(fontSize: 18.0),
        decoration: InputDecoration(border: InputBorder.none),
      ),
    );
  }
}

注意事项

1. 生产环境：请不要直接在生产环境中使用 fluttericon 包，因为它包含了大量的图标，可能会导致应用体积过大。
2. 自定义图标集：建议使用 FlutterIcon 来定制你的图标集，只选择你需要的图标并构建你自己的图标字体。

希望这个指南能帮助你在项目中更好地使用 fluttericon 插件！