Flutter图标库插件elm_icons的使用

ElmIcons

一个在Flutter中实现的Element UI Icons。

生成工具：elm_icon_gen_tool

使用方法

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

dependencies:
  elm_icons: ^<最新版本>

然后在代码中使用：

Widget icon = ElmIcon(ElmIcons.addLocation);

图标展示

以下是可用的图标列表：

完整示例代码

以下是一个完整的示例代码，展示了如何使用elm_icons插件来展示所有图标：

// 导入必要的包
import 'package:elm_icons/elm_icons.dart'; // 引入elm_icons
import 'package:flutter/material.dart'; // 引入Flutter框架

void main() {
  runApp(const MyApp()); // 运行应用
}

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

  // 构建应用根节点
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo', // 应用标题
      theme: ThemeData(
        primarySwatch: Colors.blue, // 设置主题颜色
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'), // 主页
    );
  }
}

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

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState(); // 初始化状态
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0; // 计数器

  void _incrementCounter() {
    setState(() { // 更新状态
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title), // 设置标题
        elevation: 0, // 去除阴影
      ),
      body: GridView.builder(
        padding: const EdgeInsets.all(8), // 设置内边距
        gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 32, // 每个图标的宽度
          mainAxisSpacing: 4, // 主轴间距
          crossAxisSpacing: 4, // 横轴间距
        ),
        itemBuilder: (context, index) {
          final icon = ElmIcons.values[index]; // 获取图标
          return ElmIcon(icon); // 渲染图标
        },
        itemCount: ElmIcons.values.length, // 图标总数
      ),
    );
  }
}