Flutter图标库插件tabler_icons_next的使用

Tabler Icons Next for Flutter 是一个不断更新以跟上上游最新版本的Flutter图标库插件。

🎨 图标库展示

查看所有可用图标：Tabler Icons Next Gallery

✴️ 迁移到v3

v3.x版本带来了一些重大变化。字体图标和SVG不再可用，每个图标现在都是一个独立的小部件。

v2示例

// v2
Icon(TablerIcons.check)
// 或
SvgPicture.string(TablerIconsSvg.check)

v3示例

// v3
Check()

为了避免混淆，你可以为这个包添加别名：

import 'package:tabler_icons_next/tabler_icons_next.dart' as tabler;

tabler.Check()

🎉 入门指南

直接导入

import 'package:tabler_icons_next/tabler_icons_next.dart';

Check()

注意： 一些图标名称可能与Dart不允许的名字冲突（例如Function被改为$Function）。

添加别名

为了防止与其他Flutter/Dart类名冲突（如Container和BorderRadius），可以使用包别名：

import 'package:tabler_icons_next/tabler_icons_next.dart' as tabler;

tabler.Check()

设置线宽、颜色等

import 'package:tabler_icons_next/tabler_icons_next.dart' as tabler;

tabler.Check(
  height: 18,
  width: 18,
  strokeWidth: 1.5,
  color: Colors.teal,
)

Tabler Icons Next 使用 flutter_svg 绘制图标，允许你自定义图标的样式参数。

包裹在 IconTheme 中

类似于内置的 Icon 和 IconTheme，Tabler Icons Next 提供了一种从外部自定义图标主题的方法：

import 'package:tabler_icons_next/tabler_icons_next.dart' as tabler;

tabler.IconTheme(
  data: tabler.IconThemeData(
    strokeWidth: 1.5,
    color: Colors.teal,
  ),
  child: tabler.Check(),
)

例如，创建自己的按钮组件并自定义图标样式：

import 'package:tabler_icons_next/tabler_icons_next.dart' as tabler;

class MyIconButton extends StatelessWidget {
  const MyIconButton(
    this.icon, {
    super.key,
  });

  final tabler.Icon icon;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      // ...
      child: tabler.IconTheme(
        data: tabler.IconThemeData(
          color: Colors.amber,
        ),
        child: icon,
      ),
    );
  }
}

示例代码

以下是一个完整的示例应用：

import 'package:flutter/material.dart';
import 'package:tabler_icons_next/tabler_icons_next.dart' as tabler;

void run() {
  runApp(const ExampleApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tabler Icons Next Example',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Tabler Icons Next Example'),
      ),
      body: const Center(
        child: tabler.BorderRadius(),
      ),
    );
  }
}

License

MIT