Flutter图标字体插件glyph的使用

Flutter图标字体插件glyph的使用

glyph 提供了来自各种流行设计系统的全面图标集合，包括 Material、Material Design、Material Symbols 和 Cupertino。这个库是开发人员和设计师增强其应用以高质量、一致图标为特色的多功能工具。

该库经过精心设计，注重性能。与一些预加载所有图标到内存中的图标库不同，glyph 库采用更高效的方法，仅在需要时才加载图标，确保您的应用程序保持轻量且快速，避免一次性存储所有图标所带来的不必要的开销。

集合

  • Material Icons: 来自 Google 的 Material Design 指南的一组图标，适用于各种应用。

    I.material.chatBubble

  • Material Design Icons: 遵循 Material Design 原则的扩展图标集，提供更多变体和样式。

    I.materialDesign.accessPoint

  • Material Symbols: 一组可以自定义权重、填充和等级的灵活图标，提供更适应的设计语言。

    I.materialSymbolsOutlined.appBadging
I.materialSymbolsRounded.appBadging
I.materialSymbolsSharp.appBadging

  • Cupertino Icons: 与 Apple 的 iOS 设计指南对齐的图标，确保 iOS 应用程序具有原生外观和感觉。

    I.cupertino.bookmarkSolid

完整示例 Demo

下面是一个完整的 Flutter 应用示例，展示了如何使用 glyph 插件中的图标。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Glyph Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Glyph Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // 使用 Material Icons
              Icon(I.material.chatBubble),
              SizedBox(height: 20),

              // 使用 Material Design Icons
              Icon(I.materialDesign.accessPoint),
              SizedBox(height: 20),

              // 使用 Material Symbols (Outlined)
              Icon(I.materialSymbolsOutlined.appBadging),
              SizedBox(height: 20),

              // 使用 Material Symbols (Rounded)
              Icon(I.materialSymbolsRounded.appBadging),
              SizedBox(height: 20),

              // 使用 Material Symbols (Sharp)
              Icon(I.materialSymbolsSharp.appBadging),
              SizedBox(height: 20),

              // 使用 Cupertino Icons
              Icon(I.cupertino.bookmarkSolid),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter图标字体插件glyph的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


glyph 是 Flutter 中的一个插件，用于从图标字体中加载和显示图标。它允许你轻松地使用自定义图标字体，而无需手动管理字体文件或创建复杂的图标映射。

以下是使用 glyph 插件的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  glyph: ^0.1.0  # 请使用最新版本

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

2. 加载图标字体

你需要将图标字体文件（通常是 .ttf 或 .otf 文件）添加到你的 Flutter 项目中。在 pubspec.yaml 文件中声明字体文件：

flutter:
  fonts:
    - family: MyIconFont
      fonts:
        - asset: assets/fonts/MyIconFont.ttf

确保字体文件路径正确，并且字体文件已经放在 assets/fonts/ 目录中。

3. 使用 Glyph 组件

在代码中，你可以使用 Glyph 组件来显示图标。首先，导入 glyph 包：

import 'package:glyph/glyph.dart';

然后，使用 Glyph 组件来显示图标：

Glyph(
  icon: MyIconFont.icon_name,  // 替换为你的图标名称
  size: 24.0,  // 图标大小
  color: Colors.blue,  // 图标颜色
)

4. 定义图标映射

通常，图标字体会有一个映射文件（如 .json 文件），其中定义了每个图标的名称和对应的 Unicode 码点。你可以使用这个映射文件来方便地引用图标。

例如，假设你有一个 icon_mapping.json 文件：

{
  "home": 0xe900,
  "settings": 0xe901,
  "user": 0xe902
}

你可以在代码中加载这个映射文件，并将其转换为 Map<String, int> 以便使用：

final Map<String, int> iconMapping = {
  "home": 0xe900,
  "settings": 0xe901,
  "user": 0xe902
};

然后在 Glyph 组件中使用：

Glyph(
  icon: iconMapping['home'],  // 使用映射中的图标
  size: 24.0,
  color: Colors.blue,
)

5. 自定义图标字体

如果你有多个图标字体，可以为每个字体创建一个 Glyph 组件，并根据需要切换字体：

Glyph(
  fontFamily: 'MyIconFont',  // 指定字体家族
  icon: iconMapping['home'],
  size: 24.0,
  color: Colors.blue,
)

6. 处理图标字体的加载

如果你需要在应用启动时预加载图标字体，可以使用 Glyph 提供的 GlyphFontLoader：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await GlyphFontLoader.loadFont('assets/fonts/MyIconFont.ttf');
  runApp(MyApp());
}

7. 完整示例

以下是一个完整的示例，展示了如何使用 glyph 插件：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await GlyphFontLoader.loadFont('assets/fonts/MyIconFont.ttf');
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final Map<String, int> iconMapping = {
    "home": 0xe900,
    "settings": 0xe901,
    "user": 0xe902
  };

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Glyph Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Glyph(
                icon: iconMapping['home'],
                size: 48.0,
                color: Colors.blue,
              ),
              SizedBox(height: 20),
              Glyph(
                icon: iconMapping['settings'],
                size: 48.0,
                color: Colors.red,
              ),
              SizedBox(height: 20),
              Glyph(
                icon: iconMapping['user'],
                size: 48.0,
                color: Colors.green,
              ),
            ],
          ),
        ),
      ),
    );
  }
}
回到顶部