Flutter图标字体插件flutter_iconoir_ttf的使用

Flutter Iconoir TTF

Intro:

The free open source Iconoir icons for Flutter without dependency on flutter_svg because they use a standard font file. That means you can just use the Icon widget and be on your way. ✨

There are well over a thousand nice icons to choose from! (even more if you include the additional bold variant!)

This would not be possible without the Iconoir Project Community and their efforts. 💙

Rationale:

Using a font is more lightweight on resources than parsing and rendering SVGs because the vector graphics in fonts are precompiled. Since the icons are monochrome glyphs, this works out pretty well.

Usage:

Add the following to your imports:

import 'package:flutter_iconoir_ttf/flutter_iconoir_ttf.dart';

After importing, you can utilize an Icon widget, with IconData sourced from either the IconoirIcons or IconoirIconsBold class.

Examples:

Icon(IconoirIcons.bluetooth, color: Color(0xFF0000FF))

Icon(IconoirIconsBold.bluetooth, color: Color(0xFF0000FF))

Package Customization

See the customization document in the git repo: customization.md

Example Picture

Example main.dart screen

Example Code

Here is a complete example of how to use the flutter_iconoir_ttf package in a Flutter application:

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Iconoir Icons Example'),
        ),
        body: const Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('Hello from Regular world:'),
              Icon(IconoirIcons.infinite, color: Colors.purple),
              Icon(IconoirIcons.parking, color: Colors.red),
              Icon(IconoirIcons.pound, color: Colors.blue),
              Icon(IconoirIcons.googleDriveWarning, color: Colors.green),
              Icon(IconoirIcons.tram, color: Colors.orange),
              SizedBox(height: 10,),
              Text('Hello from Bold world:'),
              // Bold version of icons
              Icon(IconoirIconsBold.infinite, color: Colors.purple),
              Icon(IconoirIconsBold.parking, color: Colors.red),
              Icon(IconoirIconsBold.pound, color: Colors.blue),
              Icon(IconoirIconsBold.googleDriveWarning, color: Colors.green),
              Icon(IconoirIconsBold.tram, color: Colors.orange),
            ],
          ),
        ),
      ),
    );
  }
}

This example demonstrates how to use both regular and bold versions of the Iconoir icons in a Flutter application. The icons are displayed with different colors to showcase their versatility.


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

1 回复

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


当然，以下是如何在Flutter项目中使用flutter_iconoir_ttf插件的一个详细示例。这个插件允许你使用图标字体（如TTF文件）来显示图标。

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_iconoir_ttf: ^最新版本号  # 请替换为实际可用的最新版本号

然后运行flutter pub get来安装依赖。

2. 准备图标字体文件

将你的图标字体文件（如icons.ttf）放到assets/fonts/目录下（如果没有这个目录，请创建）。

3. 配置pubspec.yaml

在pubspec.yaml文件的flutter部分，添加字体文件的配置：

flutter:
  assets:
    - assets/fonts/icons.ttf
  fonts:
    - family: Iconoir
      fonts:
        - asset: assets/fonts/icons.ttf

4. 使用自定义图标字体

在你的Flutter代码中，你可以使用CustomPaint和Canvas来绘制这些图标，但flutter_iconoir_ttf插件通常会有一个更方便的封装来直接显示图标。不过，由于flutter_iconoir_ttf并不是一个广泛认知的插件（可能是一个自定义或小众插件），这里假设它提供了一个类似于Icon的组件来使用图标字体。

以下是一个假设性的使用示例（具体实现取决于插件的实际API）：

import 'package:flutter/material.dart';
import 'package:flutter_iconoir_ttf/flutter_iconoir_ttf.dart';  // 假设的导入路径

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Iconoir TTF Example'),
        ),
        body: Center(
          child: IconoirIcon(
            fontFamily: 'Iconoir',  // 与pubspec.yaml中配置的family名称一致
            codePoint: 0xE800,      // 假设的图标Unicode码点，需要替换为实际的码点
            size: 48,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

// 假设flutter_iconoir_ttf提供了一个IconoirIcon组件
class IconoirIcon extends StatelessWidget {
  final String fontFamily;
  final int codePoint;
  final double size;
  final Color color;

  const IconoirIcon({
    Key? key,
    required this.fontFamily,
    required this.codePoint,
    required this.size,
    required this.color,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 这里假设插件内部已经封装了绘制逻辑
    // 实际使用时请参考插件的文档和示例
    return Text(
      String.fromCharCode(codePoint),  // 这通常不会直接工作，但用于展示思路
      style: TextStyle(
        fontFamily: fontFamily,
        fontSize: size,
        color: color,
      ),
    );
    
    // 注意：上面的Text组件仅用于展示思路，实际插件可能有自己的组件或绘制逻辑
  }
}

注意：上述IconoirIcon类是一个假设性的封装，因为flutter_iconoir_ttf的具体API可能有所不同。请务必查阅该插件的官方文档和示例代码，了解如何正确使用它。

5. 运行应用

完成以上步骤后，你可以运行你的Flutter应用，应该能够在界面上看到使用图标字体绘制的图标。

如果你找不到flutter_iconoir_ttf的官方文档或示例代码，可以尝试在GitHub或pub.dev上搜索该插件，查看其仓库或包页面以获取更多信息。如果它是一个小众或私有插件，可能需要联系插件的维护者获取帮助。

回到顶部