android - 我们可以在 Flutter 项目中在 Android 设备上使用等效的 SF Symbol 吗？

Question

我正在创建一个 Flutter 项目，我真的很喜欢使用 SF Symbol（iOS 官方图标）。我发现这样flutter_icons的包允许我们使用等效的包。我想知道我是否可以在没有任何版权问题的 Android 设备上使用它们。谢谢 ：）

Answer 1

是的，它们会正常工作。实际上，有很多软件包可以用于此目的，例如flutter_sfsymbols。而且无论您在什么平台上测试您的应用程序，一旦您在代码中使用它，它就会具有相同的图标。作为在您的项目中使用此包的提醒，请尝试以下步骤：

1. 打开pubspec.yaml，并添加flutter_sfsymbols依赖项以及所需的字体（它们已经在包中，您只需将它们添加到您的 pubspec 文件中）（您的 pubspec 应该是这样的）：

   name: example
   description: A new Flutter application.
   version: 1.0.0+1
   
   environment:
     sdk: ">=2.1.0 <3.0.0"
   
   dependencies:
     flutter:
       sdk: flutter
   
   cupertino_icons: ^0.1.2
   flutter_sfsymbols: ^1.0.0
   
   dev_dependencies:
     flutter_test:
       sdk: flutter
   
   flutter:
   
   uses-material-design: true
   
   fonts:
   
   - family: sficonsets
     fonts:
       - asset: packages/flutter_sfsymbols/fonts/sficonsets.ttf
   

2. 在终端中运行 flutter pub get，或者在 IntelliJ 或 Android Studio 中点击 Packages get。

3. 在您的 dart 文件中导入库（或尝试以下代码作为您的 main.dart）：

   import 'package:flutter_sfsymbols/flutter_sfsymbols.dart';
   import 'package:flutter/material.dart';
   
   void main() {
     runApp(MyApp());
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: DemoPage(),
       );
     }
   }
   
   class DemoPage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
           body: Center(
         child: Container(
           color: Colors.grey,
           child: Icon(SFSymbols.airplane),
         ),
       ));
     }
   }
   

4. 运行应用程序。

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

Answer 2

从 Flutter 1.22 开始，您可以直接在 Flutter 中使用 SF Symbols。

只需添加到依赖项

cupertino_icons: ^1.0.0

你明白了。例如：

import 'package:flutter/cupertino.dart';

GestureDetector(
  onTap: () {},
  child: Container(
    height: 28,
    width: 30,
    child: Center(
      child: Icon(
        CupertinoIcons.heart,
        size: 26,
      ),
    ),
  ),
),