Flutter图标库插件tabler_icons_flutter的使用

Flutter图标库插件tabler_icons_flutter的使用

Tabler Icons Flutter

Tabler Icon Pack 在 Flutter 中的应用。

Tabler 图标版本：2.11.0

pubspec.yaml

在 pubspec.yaml 文件中添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  tabler_icons_flutter: ^2.11.0

使用

首先，在你的 Dart 文件中导入 tabler_icons_flutter 包：

import 'package:tabler_icons_flutter/tabler_icons_flutter.dart';

然后，你可以在你的 Flutter 应用中使用这些图标。例如：

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return new IconButton(
      icon: new Icon(TablerIcons.ambulance), // 使用 TablerIcons 中的 ambulance 图标
      onPressed: () { print('Ambulance pressed'); } // 按钮点击事件
     );
  }
}

更新图标

可以通过运行 tabler_gen.py 脚本来更新到 Tabler 图标的最新版本。该脚本会从 Tabler 的 CSS 文件中提取代码点，并生成包含所有图标的新 Flutter 类。

完整示例

以下是一个完整的示例代码，展示如何在 Flutter 应用中使用 tabler_icons_flutter 插件来显示所有可用的 Tabler 图标：

import 'package:flutter/material.dart';

import 'package:tabler_icons_flutter/tabler_icons_flutter.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Tabler Icons',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Tabler Icons"), // 设置应用标题
      ),
      body: SingleChildScrollView( // 使内容可以滚动
        child: Wrap( // 使用 Wrap 布局管理图标
          children: [
            for (final iconData in TablerIcons.all.values) // 遍历所有图标
              Icon(iconData) // 显示每个图标
          ],
        ),
      ),
    );
  }
}