Flutter图标使用插件 material_icons_named 的功能

目录

• Live Example
• Introduction
• Usage

Live Example

您可以访问以下链接查看实时示例：

• Web 示例

Introduction

material_icons_named 是一个库，它为所有基于 Material Design 的图标提供了从字符串到图标的自动映射。这些图标是从 Flutter 的 stable 分支自动生成的。

请注意，如果包含此库，则在为 Android 和 iOS 构建时，Flutter 会报错，提示无法进行树摇（tree shaking）。因此，您必须在构建命令中添加 --no-tree-shake-icons 标志。例如：

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

由于 Flutter 无法对图标进行树摇优化，仅 Material Icons 就可能为您的最终应用增加约 350KB 的体积。这还不包括其他无法被树摇掉的图标。

Usage

安装

首先，在 pubspec.yaml 文件中添加依赖：

dependencies:
  material_icons_named: ^latest_version

然后运行 flutter pub get 来安装该插件。

示例代码

下面是一个完整的示例，展示了如何使用 material_icons_named 插件来展示 Material Icons 并允许用户搜索和点击图标以查看详细信息。

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:material_icons_named/material_icons_named.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Icons Gallery',
      theme: ThemeData.light().copyWith(
        iconTheme: const IconThemeData(
          color: Colors.black87,
          size: 36.0,
        ),
        textTheme: const TextTheme(
          bodyMedium: TextStyle(
            color: Colors.black87,
            fontSize: 16.0,
          ),
        ),
      ),
      home: const MaterialIconGalleryHome(),
    );
  }
}

class ExampleIcon {
  final IconData iconData;
  final String title;

  ExampleIcon(this.iconData, this.title);
}

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

  @override
  State<MaterialIconGalleryHome> createState() => MaterialIconGalleryHomeState();
}

class MaterialIconGalleryHomeState extends State<MaterialIconGalleryHome> {
  final List<ExampleIcon> icons = [];
  var _searchTerm = '';
  var _isSearching = false;

  @override
  void initState() {
    super.initState();

    for (var entry in materialIcons.entries) {
      icons.add(ExampleIcon(entry.value, entry.key));
    }
  }

  @override
  Widget build(BuildContext context) {
    final filteredIcons = icons.where((icon) =>
        _searchTerm.isEmpty ||
        icon.title.toLowerCase().contains(_searchTerm.toLowerCase())).toList();

    return Scaffold(
      appBar: _isSearching ? _searchBar(context) : _titleBar(),
      body: Scrollbar(
        thumbVisibility: kIsWeb,
        child: GridView.builder(
          itemCount: filteredIcons.length,
          gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 300,
          ),
          itemBuilder: (context, index) {
            final icon = filteredIcons[index];

            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: 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: const EdgeInsets.only(top: 16.0),
                    child: Text(icon.title),
                  )
                ],
              ),
            );
          },
        ),
      ),
    );
  }

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

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

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

使用说明

1. 导入插件：在 Dart 文件顶部导入 material_icons_named 插件。
2. 获取图标数据：通过 materialIcons 映射表获取图标名称对应的 IconData。
3. 显示图标：将获取到的 IconData 传递给 Icon 小部件以显示图标。

例如：

Icon(materialIcons['wifi_tethering_outlined']),