Flutter图标管理插件twicon的使用

Flutter图标管理插件twicon的使用

twicon 套件可以让你将 TW Icon Fonts 轻松整合到你的 Flutter app 当中。

TW Icon Fonts 是一套以台湾为主题的免费图示，包含了属于台湾风景、交通、本土产品的各种图示。这套装图示是由两位居住在台湾的日本设计者 holiko 和英国设计者 Rob 所设计，更多相关信息，请参见 TW Icon Fonts 的页面。

在 https://zonble.github.io/twicon/ 上面，也提供了以 Flutter Web 制作的范例。

使用方法

在 pubspec.yaml 文件中添加 twicon 依赖，然后运行 flutter packages get，接着你可以导入这个包：

import 'package:twicon/twicon.dart';

然后你可以在 Icon 和 IconButton 等小部件中使用这些图标：

Icon(TaiwanIcons.taipei101);

你还可以运行示例项目来查看包含的图标。

完整示例代码

以下是完整的示例代码，展示如何使用 twicon 插件在 Flutter 应用中显示 TW Icon Fonts 图标。

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) => MaterialApp(
        title: 'Taiwan Icons',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: MyHomePage(title: 'Taiwan Icons'),
      );
}

class MyHomePage extends StatefulWidget {
  MyHomePage({super.key, required this.title});
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    var items = Item.all;
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Scrollbar(
        child: Container(
          color: Colors.black26,
          child: CustomScrollView(slivers: <Widget>[
            SliverPadding(
              padding: const EdgeInsets.only(top: 20, left: 10, right: 10, bottom: 0),
              sliver: SliverToBoxAdapter(
                child: Text(
                  'This is the list of the icons contained in "twicon" package.',
                  style: Theme.of(context).textTheme.headline5,
                ),
              ),
            ),
            SliverPadding(
              padding: const EdgeInsets.all(10),
              sliver: SliverGrid(
                gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                    maxCrossAxisExtent: 300,
                    mainAxisSpacing: 10,
                    crossAxisSpacing: 10),
                delegate: SliverChildBuilderDelegate(
                  (context, index) => IconCard(item: items[index], index: index),
                  childCount: items.length,
                ),
              ),
            ),
          ]),
        ),
      ),
    );
  }
}

class IconCard extends StatelessWidget {
  const IconCard({super.key, required this.item, required this.index});

  final Item item;
  final int index;

  [@override](/user/override)
  Widget build(BuildContext context) => Card(
        child: InkWell(
          onTap: () => showDialog(
            context: context,
            builder: (context) => SimpleDialog(
              title: Text('${index + 1} - ${item.title}'),
              contentPadding: const EdgeInsets.all(20),
              children: <Widget>[
                Container(
                  width: 240,
                  height: 240,
                  child: Icon(item.icon, size: 200, color: Colors.black),
                ),
                SizedBox(width: 10),
                ElevatedButton(
                  child: Text('Close'),
                  onPressed: () => Navigator.of(context).pop(),
                )
              ],
            ),
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                width: 140,
                height: 140,
                child: Icon(item.icon, size: 100, color: Colors.black),
              ),
              SizedBox(width: 10),
              Flexible(child: Text('${index + 1} - ${item.title}')),
            ],
          ),
        ),
      );
}

class Item {
  IconData icon;
  String title;

  Item(this.icon, this.title);

  static get all {
    return [
      // 这里省略了部分示例数据
      Item(TaiwanIcons.taipei101, 'Taipei 101'),
      Item(TaiwanIcons.national_palace_museum, 'National Palace Museum'),
      // 其他图标...
    ];
  }
}