Flutter图标字体插件flutter_sficon的使用

Flutter SFIcon 是一个用于在 Flutter 应用中渲染 SF Symbols 图标的插件。它类似于常规的 Icon 小部件，并支持最新的 SF Symbols 版本 5.1。图标是可摇树优化的（tree shakable），并且 SFIcon 小部件基于 Text 小部件。

安装

将 flutter_sf_symbols 添加到您的 pubspec.yaml 文件中：

dependencies:
  flutter_sficon: ^latest_version

然后运行以下命令来安装依赖项：

flutter pub add flutter_sficon

如何使用

为了正确使用 Flutter 的摇树优化功能，所有图标都存储在 SFIcons 类中作为静态常量。获取 SF Symbol 的命名约定如下：

1. SF Symbol 名称前缀为 sf_。
2. 点号（.）替换为下划线（_）。

示例

• SF Symbol 0.circle 命名为 sf_0_circle
• SF Symbol heart.fill 命名为 sf_heart_fill

以下是使用 SFIcon 的示例代码：

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

const SFIcon(
    SFIcons.sf_heart_fill, // 'heart.fill'
    fontSize: 40, // 使用 fontSize 而不是 size
    fontWeight: FontWeight.bold, // 使用 fontWeight 而不是 weight
    color: Colors.red,
);

重要事项

所有 SF Symbols 都应被视为由 Xcode 和 Apple SDK 许可协议定义的系统提供的图像，并受其中条款和条件的约束。您不得在应用程序图标、徽标或任何其他商标相关用途中使用 SF Symbols 或与之混淆的字形。Apple 有权审查并自行决定要求修改或停止使用违反上述限制的任何符号，并且您同意及时遵守任何此类请求。

完整示例 Demo

以下是一个完整的示例应用，展示了如何在 Flutter 应用中使用 flutter_sficon 插件：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: IconTheme(
          data: IconThemeData(color: Theme.of(context).colorScheme.primary),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SFIcon(
                SFIcons.sf_chevron_backward,
                fontSize: 40,
                fontWeight: FontWeight.w100,
              ),
              SFIcon(
                SFIcons.sf_chevron_backward,
                fontSize: 40,
                fontWeight: FontWeight.w200,
              ),
              SFIcon(
                SFIcons.sf_chevron_backward,
                fontSize: 40,
                fontWeight: FontWeight.w300,
              ),
              SFIcon(
                SFIcons.sf_chevron_backward,
                fontSize: 40,
                fontWeight: FontWeight.w400,
              ),
              SFIcon(
                SFIcons.sf_chevron_backward,
                fontSize: 40,
                fontWeight: FontWeight.w500,
              ),
              SFIcon(
                SFIcons.sf_chevron_backward,
                fontSize: 40,
                fontWeight: FontWeight.w600,
              ),
              SFIcon(
                SFIcons.sf_chevron_backward,
                fontSize: 40,
                fontWeight: FontWeight.w700,
              ),
              SFIcon(
                SFIcons.sf_chevron_backward,
                fontSize: 40,
                fontWeight: FontWeight.w800,
              ),
              SFIcon(
                SFIcons.sf_chevron_backward,
                fontSize: 40,
                fontWeight: FontWeight.w900,
              ),
            ],
          ),
        ),
      ),
    );
  }
}