Flutter图标字体插件sdga_icons的使用

Flutter图标字体插件sdga_icons的使用

简介

sdga_icons 是一个包含超过4000个图标的Flutter图标字体插件，这些图标由沙特数字政府管理局（SDGA）设计，并基于 HugeIcons 图标库。这些图标旨在保持视觉一致性并提升用户体验。

每个图标有以下7种变体：

• Bulk
• DuoTone
• TwoTone
• Solid
• Stroke
• Sharp Solid
• Sharp Stroke

截图展示

以下是各变体的截图：

安装

在 pubspec.yaml 文件的 dependencies: 部分添加以下内容：

dependencies:
  sdga_icons: <latest_version>

然后运行以下命令以获取依赖项：

flutter pub get

使用方法

使用 SDGAIcon 小部件

首先，导入插件包：

import 'package:sdga_icons/sdga_icons.dart';

以下是一个简单的示例，展示如何使用 SDGAIcon 显示微笑图标（Bulk 变体）：

// 显示微笑图标（Bulk 变体）
SDGAIcon(
  SDGAIconsBulk.smile, // 选择 Bulk 变体的微笑图标
  semanticLabel: 'Smile', // 提供语义标签
),

你可以使用 Icon 小部件的所有属性来自定义图标，例如大小、颜色等。

使用 Flutter 原生 Icon 小部件

你也可以使用原生的 Icon 小部件来显示图标。不过需要注意的是，某些变体（如 Bulk、DuoTone 和 TwoTone）由于其特殊设计，可能无法完全渲染。因此，建议优先使用 SDGAIcon 小部件。

// 使用 Solid 变体的微笑图标
Icon(SDGAIconsSolid.smile),

注意：由于 Flutter 的 Icon 小部件存在一些限制，当传递 Bulk、DuoTone 或 TwoTone 类型的图标时，可能会只渲染部分图标。在这种情况下，建议使用 SDGAIcon 小部件，它与 Icon 小部件功能相同，并支持所有变体。

示例应用

你可以通过克隆仓库并在其中运行示例项目来查看所有图标及其变体：

cd sdga_icons/example
flutter pub get
flutter run

示例代码

以下是一个完整的示例代码，展示了如何使用 sdga_icons 插件动态加载不同变体的图标：

import 'package:example/constants.dart';
import 'package:example/icons/icons.dart';
import 'package:example/header_delegate.dart';
import 'package:flutter/material.dart';
import 'package:sdga_icons/sdga_icons.dart';

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

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

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  SDGAIconsMapperBase _mapper = const SDGAIconsMapperBulk(); // 默认使用 Bulk 变体
  SDGAIconStyle _style = SDGAIconStyle.bulk; // 当前选中的样式

  void _updateMapper() {
    _mapper = switch (_style) {
      SDGAIconStyle.bulk => const SDGAIconsMapperBulk(), // 切换到 Bulk 变体
      SDGAIconStyle.duotone => const SDGAIconsMapperDuotone(), // 切换到 DuoTone 变体
      SDGAIconStyle.solid => const SDGAIconsMapperSolid(), // 切换到 Solid 变体
      SDGAIconStyle.stroke => const SDGAIconsMapperStroke(), // 切换到 Stroke 变体
      SDGAIconStyle.twotone => const SDGAIconsMapperTwotone(), // 切换到 TwoTone 变体
      SDGAIconStyle.sharpSolid => const SDGAIconsMapperSharpSolid(), // 切换到 Sharp Solid 变体
      SDGAIconStyle.sharpStroke => const SDGAIconsMapperSharpStroke(), // 切换到 Sharp Stroke 变体
    };
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text("SDGA Icons (${_style.text})"), // 动态显示当前样式
          backgroundColor: Colors.white,
          shadowColor: Colors.black,
          surfaceTintColor: Colors.white,
          actions: [
            PopupMenuButton<SDGAIconStyle>( // 提供下拉菜单切换样式
              initialValue: _style,
              icon: SDGAIcon(_mapper.moreVerticalCircle01), // 使用图标作为菜单按钮
              onSelected: (value) {
                setState(() {
                  _style = value;
                  _updateMapper();
                });
              },
              itemBuilder: (BuildContext context) =>
                  SDGAIconStyle.values.map((style) => PopupMenuItem( // 构建菜单选项
                        value: style,
                        child: Text(style.text),
                      )).toList(),
            ),
          ],
        ),
        body: CustomScrollView(
          slivers: [
            for (final category in categories.keys) ...[
              SliverMainAxisGroup(
                slivers: [
                  _buildHeader(category), // 构建分类头部
                  SliverGrid.builder(
                    itemCount: categories[category]!.length, // 每个分类下的图标数量
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                      crossAxisCount: (MediaQuery.of(context).size.width / 128).round(), // 动态调整列数
                      crossAxisSpacing: 0,
                      mainAxisSpacing: 0,
                    ),
                    itemBuilder: (context, index) => _buildIcon(categories[category]![index]), // 构建图标单元
                  ),
                ],
              ),
              SliverToBoxAdapter(
                child: Container(
                  width: double.infinity,
                  height: 1,
                  color: Colors.black,
                ),
              ),
            ]
          ],
        ),
      ),
    );
  }

  Widget _buildHeader(String category) {
    return SliverPersistentHeader(
      pinned: true,
      delegate: HeaderDelegate(
        minHeight: 48,
        maxHeight: 48,
        child: Center(
          child: Container(
            padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 12),
            decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(),
              borderRadius: const BorderRadius.all(Radius.circular(8)),
            ),
            child: Text(
              category,
              style: const TextStyle(fontWeight: FontWeight.bold),
            ),
          ),
        ),
      ),
    );
  }

  Widget _buildIcon(String name) {
    final icon = _mapper.getIcon(name); // 获取指定名称的图标
    return Container(
      padding: const EdgeInsets.all(12.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          if (icon != null)
            SDGAIcon(
              icon,
              size: 48, // 设置图标大小
              color: const Color(0xFF1849A9), // 设置图标颜色
            )
          else
            const SizedBox(
              width: 48,
              height: 48,
              child: Placeholder(), // 如果图标不存在，显示占位符
            ),
          Expanded(
            child: Text(
              name, // 显示图标名称
              textAlign: TextAlign.center,
            ),
          ),
        ],
      ),
    );
  }
}