Flutter图标与符号插件flutter_sfsymbols的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter图标与符号插件flutter_sfsymbols的使用

flutter_sfsymbols

这是一个新的Flutter包，需要SFSymbol图标。该插件支持所有iOS和Android设备。

图标示例

安装

要使用flutter_sfsymbols，你需要在pubspec.yaml文件中添加依赖：

dependencies:
  flutter_sfsymbols: ^1.0.0

同时，你也需要将字体添加到pubspec.yaml中：

fonts:
  - family: sficonsets
    fonts:
      - asset: packages/flutter_sfsymbols/fonts/sficonsets.ttf

所有图标

你可以通过以下链接查找所有图标： Framework7 Icons 或者使用Apple SF symbols工具浏览所有的图标集。

使用方法

以下是使用flutter_sfsymbols的基本代码示例：

import 'package:flutter_sfsymbols/flutter_sfsymbols.dart';

const Icon(SFSymbols.airplane),
const Icon(SFSymbols.ant_circle_fill),
const Icon(SFSymbols.app_badge_fill),

注意事项

所有SF Symbols都被视为Xcode和Apple SDKs许可协议中定义的系统提供的图像，受其中规定的条款和条件约束。你不能在应用图标、徽标或任何其他商标相关用途中使用SF Symbols——或与其相似度高到容易混淆的字符。苹果保留审查并根据其唯一判断要求修改或停止使用任何违反上述限制的符号的权利，你同意立即遵从任何此类请求。

示例代码

下面是一个完整的示例代码，展示了如何在Flutter项目中使用flutter_sfsymbols:

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_sfsymbols/flutter_sfsymbols.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: const Center(
          child: const MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('展示SFSymbols图标'),
          SizedBox(height: 20),
          Icon(SFSymbols.alarm_fill, size: 50, color: Colors.white),
          SizedBox(height: 20),
          Icon(SFSymbols.alarm, size: 50, color: Colors.white),
        ],
      ),
    );
  }
}

此示例创建了一个简单的Flutter应用程序，在屏幕上居中显示了两个SF Symbols图标：alarm_fill 和 alarm。你可以根据需要替换为其他图标名称来查看不同的图标效果。


更多关于Flutter图标与符号插件flutter_sfsymbols的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter图标与符号插件flutter_sfsymbols的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，flutter_sfsymbols 是一个用于在 Flutter 应用中使用 Apple 的 SF Symbols 图标的插件。SF Symbols 提供了一组高质量的符号图标，适用于各种设备和系统风格。以下是如何在 Flutter 项目中使用 flutter_sfsymbols 插件的示例代码。

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_sfsymbols 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_sfsymbols: ^x.y.z  # 请使用最新版本号

然后运行 flutter pub get 来获取依赖。

2. 导入插件

在你的 Dart 文件中，导入 flutter_sfsymbols 插件：

import 'package:flutter_sfsymbols/flutter_sfsymbols.dart';

3. 使用图标

你可以使用 SFSymbols.iconName 来访问并显示 SF Symbols 中的图标。以下是一个简单的示例，展示了如何在按钮中使用 SF Symbols 图标：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter SFSymbols Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 使用 SFSymbols 图标
              IconButton(
                icon: Icon(SFSymbols.plus),
                onPressed: () {
                  // 按钮点击事件
                  print('Plus button pressed');
                },
              ),
              SizedBox(height: 20),
              IconButton(
                icon: Icon(SFSymbols.arrow_clockwise),
                onPressed: () {
                  // 按钮点击事件
                  print('Arrow clockwise button pressed');
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

4. 自定义图标样式

你还可以自定义图标的样式，例如颜色、大小等：

IconButton(
  icon: Icon(
    SFSymbols.heart,
    color: Colors.red,
    size: 32,
  ),
  onPressed: () {
    // 按钮点击事件
    print('Heart button pressed');
  },
)

5. 使用在 Text 中

虽然 Icon 组件是显示图标的最常见方式，但你也可以将 SF Symbols 图标作为文本的一部分使用（尽管这通常不推荐用于 UI 图标）：

Text(
  'Search ${String.fromCharCode(SFSymbols.magnifyingglass.codePoint)}',
  style: TextStyle(fontSize: 24),
)

注意：直接使用 String.fromCharCode 的方式并不是 flutter_sfsymbols 插件的官方推荐用法，因为这样做可能无法正确处理图标的样式和渲染。官方推荐的方式是通过 Icon 组件来显示图标。

通过上述步骤，你就可以在 Flutter 应用中轻松地使用 flutter_sfsymbols 插件来访问和显示 SF Symbols 图标了。

回到顶部