Flutter图标库插件tabler_icons_for_flutter的使用

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

Flutter图标库插件tabler_icons_for_flutter的使用

使用此插件作为库

flutter pub add tabler_icons_for_flutter

开始使用

以下是一个简单的示例，展示如何在Flutter应用中使用tabler_icons_for_flutter插件。

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('tabler icons demo'),
        ),
        body: const Center(child: TablerIcon(TablerIcons.cone_plus)));
  }
}

完整示例Demo

下面是一个更完整的示例，展示了如何在应用中展示多种Tabler图标。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'tabler icons',
      home: HomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 创建一个包含多个图标的列表
    List<IconData> newIcon = [
      TablerIcons.backslash,
      TablerIcons.rewind_backward_10,
      TablerIcons.rewind_backward_15,
      TablerIcons.rewind_backward_20,
      TablerIcons.rewind_backward_30,
      TablerIcons.rewind_backward_40,
      TablerIcons.rewind_backward_5,
      TablerIcons.rewind_backward_50,
      TablerIcons.rewind_backward_60,
      TablerIcons.rewind_forward_10,
      TablerIcons.rewind_forward_15,
      TablerIcons.rewind_forward_20,
      TablerIcons.rewind_forward_30,
      TablerIcons.rewind_forward_40,
      TablerIcons.rewind_forward_5,
      TablerIcons.rewind_forward_50,
      TablerIcons.rewind_forward_60,
      TablerIcons.skateboarding
    ];

    return Scaffold(
        appBar: AppBar(
          title: const Text('tabler icons demo'),
        ),
        body: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
          const SizedBox(
            height: 12,
          ),
          // 水平滚动展示部分图标
          SizedBox(
            height: 50,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: newIcon.length,
              itemBuilder: (BuildContext context, int index) {
                return Padding(
                  padding: const EdgeInsets.all(4),
                  child: Container(
                    height: 48,
                    width: 48,
                    decoration: const BoxDecoration(
                      color: Colors.black12,
                      shape: BoxShape.circle,
                    ),
                    child: Center(
                      child: TablerIcon(
                        newIcon[index],
                        size: 24,
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
          const SizedBox(
            height: 8,
          ),
          // 展示所有Tabler图标
          Expanded(
            child: ListView.builder(
              itemCount: TablerIcons.all.length,
              itemBuilder: (BuildContext context, int index) {
                String key = TablerIcons.all.keys.elementAt(index);
                IconData iconData = TablerIcons.all.values.elementAt(index);
                return Column(
                  children: <Widget>[
                    ListTile(
                      leading: TablerIcon(
                        iconData,
                        size: 24,
                      ),
                      title: Text(key),
                    ),
                    const Divider(
                      height: 2.0,
                    ),
                  ],
                );
              },
            ),
          ),
        ]));
  }
}

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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何使用 tabler_icons_for_flutter 插件的示例代码。这个插件提供了一系列来自 Tabler 图标库的图标，你可以在 Flutter 应用中使用它们。

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

dependencies:
  flutter:
    sdk: flutter
  tabler_icons_for_flutter: ^x.y.z  # 请替换为最新版本号

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

接下来，你可以在你的 Flutter 应用中使用这些图标。以下是一个简单的示例，展示如何在按钮和文本中使用 Tabler 图标：

import 'package:flutter/material.dart';
import 'package:tabler_icons_flutter/icons.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tabler Icons Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tabler Icons Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 使用图标按钮
            IconButton(
              icon: Icon(TablerIcons.home), // 使用 Tabler 图标
              onPressed: () {
                print('Home icon pressed');
              },
            ),
            SizedBox(height: 20),
            // 使用图标和文本
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Icon(TablerIcons.user, color: Colors.blue),
                SizedBox(width: 10),
                Text('User Profile'),
              ],
            ),
            SizedBox(height: 20),
            // 使用带图标的列表项
            ListTile(
              leading: Icon(TablerIcons.settings),
              title: Text('Settings'),
              trailing: Icon(Icons.arrow_forward),
              onTap: () {
                print('Settings tile tapped');
              },
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. IconButton 使用 TablerIcons.home 作为图标。
  2. 一个 Row 小部件包含一个 Icon 和一个 Text，展示如何结合使用图标和文本。
  3. 一个 ListTile 使用 TablerIcons.settings 作为前导图标。

你可以根据需要替换为其他 Tabler 图标。tabler_icons_flutter/icons.dart 文件中列出了所有可用的图标，你可以查阅该文件了解所有图标的名称。

回到顶部