Flutter字体搜索插件font_awesome_search的使用

Font Awesome Search

该插件为font_awesome_flutter包提供了一个搜索功能，使用了与FontAwesome图标库相同的Algolia搜索引擎。

此函数调用来自https://api.fontawesome.com的GraphQL API。有关API的更多信息，请访问 https://fontawesome.com/docs/apis/graphql/query-fields。

!! 该插件目前不支持自定义图标，只能搜索免费图标 !!

安装

在你的pubspec.yaml文件中添加以下依赖项：

dependencies:
  font_awesome_flutter: 
  font_awesome_search: 

使用

导入所需的包并使用searchFontAwesomeIcons方法进行搜索：

import 'package:font_awesome_search/font_awesome_search.dart';

final icons = await searchFontAwesomeIcons('query');

重要提示

为了使此插件正常工作，您需要禁用图标的树摇（tree shaking）。这意味着未使用的图标将不会被自动移除，因此会使应用程序的整体大小变大。您可能需要在flutter build命令中传递--no-tree-shake-icons以使其成功完成。

例如：

flutter build apk --no-tree-shake-icons

示例代码

下面是一个完整的示例，展示了如何在Flutter应用中使用font_awesome_search插件。

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:font_awesome_search/font_awesome_search.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Font Awesome Search',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Font Awesome Search'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _loading = false;
  final _searchController = TextEditingController();
  List<IconData> _icons = [];

  Future<void> search() async {
    final query = _searchController.text.trim();
    if (query.isEmpty) {
      setState(() {
        _icons.clear();
      });
      return;
    }
    setState(() {
      _loading = true;
    });

    final icons = await searchFontAwesomeIcons(query);
    setState(() {
      _loading = false;
      _icons = icons;
    });
  }

  [@override](/user/override)
  void dispose() {
    _searchController.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _searchController,
                    decoration: const InputDecoration(
                      hintText: 'Search for an icon',
                    ),
                    onSubmitted: (_) => search(),
                  ),
                ),
                IconButton(
                  onPressed: _loading ? null : search,
                  icon: const FaIcon(FontAwesomeIcons.magnifyingGlass),
                ),
              ],
            ),
          ),
          Expanded(
            child: _loading
                ? const Center(
                    child: CircularProgressIndicator(),
                  )
                : _icons.isEmpty
                    ? const Center(
                        child: Text('No icons'),
                      )
                    : GridView.builder(
                        gridDelegate:
                            const SliverGridDelegateWithMaxCrossAxisExtent(
                          maxCrossAxisExtent: 100,
                          mainAxisExtent: 100,
                        ),
                        itemCount: _icons.length,
                        itemBuilder: (context, index) {
                          final icon = _icons[index];
                          return Center(
                            child: FaIcon(
                              icon,
                              size: 50,
                            ),
                          );
                        },
                      ),
          ),
        ],
      ),
    );
  }
}