Flutter图标字体插件glyphicon的使用

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

Flutter图标字体插件glyphicon的使用

想要复古体验，使用旧的Bootstrap图标？

这个包包含了1480个来自Glyphicons的图标。命名约定与CSS名称相同，所有破折号被替换为下划线。

安装

在你的pubspec.yaml文件中添加glyphicon：

dependencies:
  flutter:
    sdk: flutter
  glyphicon: ^最新版本号

新特性 💥

  • 添加更多图标
  • 添加从字符串图标名称获取IconData的方法

使用方法

要使用此包，只需将其导入到你的文件中即可享受它带来的便利。

import 'package:glyphicon/glyphicon.dart';

...

Icon(Glyphicon.alarm)
Icon(Glyphicon.table, size: 48)
Icon(Glyphicon.window, size: 48, color: Colors.blue,)
Icon(Glyphicon.fromString('bootstrap'), size: 48, color: Colors.purpleAccent,)
...

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用glyphicon包：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Demo Glyphicon'),
        ),
        body: GridView.count(
          crossAxisCount: 2,
          children: [
            Icon(Glyphicon.alarm, size: 48,),
            Icon(Glyphicon.save, size: 48, color: Colors.red,),
            Icon(Glyphicon.table, size: 48, color: Colors.amber,),
            Icon(Glyphicon.window, size: 48, color: Colors.blue,),
            Icon(Glyphicon.archive, size: 48, color: Colors.orange,),
            Icon(Glyphicon.file_earmark_pdf, size: 48, color: Colors.redAccent,),
            Icon(Glyphicon.currency_dollar, size: 48, color: Colors.yellow,),
            Icon(Glyphicon.fromString('bootstrap'), size: 48, color: Colors.purpleAccent,)
          ],
        ),
      ),
    );
  }
}

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

Harmonyos Next教程
1 回复

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


在Flutter中使用图标字体插件，比如glyphicon，可以通过自定义字体的方式来实现。尽管glyphicon不是专门为Flutter设计的，但你可以将其字体文件集成到你的Flutter项目中，并使用CustomPaint或更常见的IconData和Icon小部件来显示这些图标。

以下是一个基本的步骤和代码示例，展示如何在Flutter中使用自定义的glyphicon字体文件：

  1. 准备字体文件： 确保你有glyphicon的字体文件（如.ttf格式）。

  2. 将字体文件添加到项目中： 将字体文件放置在assets/fonts/目录下（你可以根据需要调整目录结构）。

  3. 在pubspec.yaml中声明字体文件：

flutter:
  assets:
    - assets/fonts/glyphicon.ttf
  fonts:
    - family: Glyphicon
      fonts:
        - asset: assets/fonts/glyphicon.ttf
  1. 创建自定义的IconData类： 由于glyphicon不是Flutter内置图标集的一部分，你需要创建一个映射来表示每个图标的Unicode码点。
import 'package:flutter/material.dart';

class Glyphicon {
  static const IconData home = IconData(0xe000, fontFamily: 'Glyphicon');
  // 添加更多图标数据，使用对应的Unicode码点
  // 例如: static const IconData search = IconData(0xe001, fontFamily: 'Glyphicon');
}
  1. 在Widget中使用自定义图标：
import 'package:flutter/material.dart';
import 'glyphicon_icons.dart'; // 假设你将上面的类放在这个文件里

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Glyphicon Example'),
        ),
        body: Center(
          child: Icon(
            Glyphicon.home,
            size: 48,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }
}

注意：

  • 上面的0xe000是一个示例Unicode码点，你需要根据你的glyphicon字体文件替换为实际的码点。
  • 你可能需要查看glyphicon的官方文档或使用字体查看工具来获取每个图标的Unicode码点。
  • 确保字体文件正确加载并且Unicode码点正确无误，否则图标可能无法显示。

通过上述步骤，你应该能够在Flutter项目中成功使用glyphicon图标字体。如果有特定的图标需求，只需在Glyphicon类中添加更多的IconData静态变量即可。

回到顶部