Flutter图标字体插件font_awesome_metadata的使用

Flutter图标字体插件font_awesome_metadata的使用

介绍

font_awesome_metadata 是一个基于 font_awesome_flutter 包的免费图标包，包含了额外的映射元数据，允许搜索和过滤图标。最新的构建版本是基于 Font Awesome 版本 6.3.0。

安装

在您的 pubspec.yaml 文件中的 dependencies: 部分添加以下行：

dependencies:
  font_awesome_metadata: <latest_version>

请将 <latest_version> 替换为该插件的最新版本号。

使用方法

此包包含一种搜索结构形式的地图。这是一个从官方 Font Awesome 数据反转的地图，其中每个搜索词都与一组图标相匹配。

这个称为 searchTermMappings 的地图可以用于执行直接或扩展搜索。直接搜索会返回来自精确匹配的结果：

import 'package:font_awesome_metadata/font_awesome_metadata.dart';

// 直接搜索示例
List<IconData> results = searchTermMappings[searchTerm];

或者通过查找所有包含搜索词的单词来扩展查询：

List<IconData> results = searchTermMappings.entries // 获取条目作为可迭代对象
      .where((e) => e.key.contains(searchTerm)) // 查找所有键包含搜索词的条目
      .map((e) => e.value) // 仅选择条目的值
      .expand((e) => e) // 因为值是一个列表，将其展开到单个列表中
      .toSet() // 确保没有重复项
      .toList();

faNamedMappings 地图根据 Font Awesome 网站上的名称一对一地映射到各自的 IconData。命名改为驼峰式，并且以数字开头的图标名称用文字表示。

FaIcon(faNamedMappings['magnifyingGlass']) // 使用图标名称映射获取图标

FaIconCategory 类是基于 Font Awesome 网站上的搜索类别构建的。每个类别都有一个图标列表和可用于显示的附加元数据。

DropdownButton<IconCategory>(
        hint: const Text('Select category'),
        items: FaIconCategory.categories
        .map((e) => DropdownMenuItem<IconCategory>(
            value: e,
            child: Text(e.label),
            ))
        .toList(),
        onChanged: (value) {
            setState(() {
                results = value?.icons ?? [];
            });
        }),

完整示例 Demo

以下是完整的示例代码，展示了如何使用 font_awesome_metadata 插件进行图标搜索和显示：

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Font awesome metadata example',
      home: FontAwesomeMetadataPage(),
    );
  }
}

class FontAwesomeMetadataPage extends StatefulWidget {
  const FontAwesomeMetadataPage({super.key});

  [@override](/user/override)
  State<FontAwesomeMetadataPage> createState() => _FontAwesomeMetadataPageState();
}

class _FontAwesomeMetadataPageState extends State<FontAwesomeMetadataPage> {
  List<IconData> results = [];
  TextEditingController controller = TextEditingController();

  void directSearch(String searchTerm) {
    setState(() {
      results = searchTermMappings[searchTerm] ?? []; // 直接搜索图标
    });
  }

  void multipleSearch(String searchTerm) {
    setState(() {
      results = searchTermMappings.entries // 获取条目作为可迭代对象
          .where((e) => e.key.contains(searchTerm)) // 查找所有键包含搜索词的条目
          .map((e) => e.value) // 仅选择条目的值
          .expand((e) => e) // 因为值是一个列表，将其展开到单个列表中
          .toSet() // 确保没有重复项
          .toList(); // 转换为列表
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Font Awesome Metadata'), // 应用栏标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextFormField(
              controller: controller, // 文本输入控制器
            ),
            DropdownButton<IconCategory>(
                hint: const Text('Select category'), // 下拉菜单提示文本
                items: FaIconCategory.categories
                    .map((e) => DropdownMenuItem<IconCategory>(
                          value: e,
                          child: Text(e.label), // 显示类别标签
                        ))
                    .toList(),
                onChanged: (value) {
                  setState(() {
                    results = value?.icons ?? []; // 更新结果为选中的类别图标
                  });
                }),
            SizedBox(
              height: 150,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  IconButton(
                      tooltip: 'Direct search', // 工具提示
                      onPressed: () => directSearch(controller.text), // 执行直接搜索
                      icon: FaIcon(
                        faNamedMappings['magnifyingGlass'], // 搜索图标
                      )),
                  IconButton(
                      tooltip: 'Full search', // 工具提示
                      onPressed: () => multipleSearch(controller.text), // 执行完整搜索
                      icon: FaIcon(faNamedMappings['expand'])) // 展开图标
                ],
              ),
            ),
            Expanded(
                child: GridView.builder(
                    itemCount: results.length, // 图标数量
                    gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 10), // 网格布局
                    itemBuilder: (context, index) => FaIcon(results[index]))) // 显示图标
          ],
        ),
      ),
    );
  }
}