Flutter图标管理插件r_icon_pro的使用

r_icon_pro

r_icon_pro 是一个为 Flutter 提供的图标包，包含 1200+ 个圆角图标，设计风格时尚现代。非常适合需要干净且极简风格图标集的应用。

特性

• 1200+ 图标：涵盖各种应用场合的图标集合。
• 圆角风格：每个图标都采用平滑的圆角设计。
• 易于使用：简单集成到任何 Flutter 项目中。
• 自定义字体：图标作为自定义字体封装，方便缩放且高效使用。

安装

在你的 pubspec.yaml 文件中添加 r_icon_pro 包：

dependencies:
  r_icon_pro: ^1.0.3

然后运行 flutter pub get 来安装该包。

使用/示例

使用方式与 Flutter 的 Material Icons 类似：

import 'package:r_icon_pro/r_icon_pro.dart';

const Icon(RIcon.Add_Circle, color: Colors.blueAccent);
const Icon(RIcon.Alarm_Play, size: 30);
const Icon(RIcon.Balloon);

图标分类

通过点击以下链接浏览不同类别的图标：

1. 🎯 箭头
2. 🔄 动作箭头
3. 🌌 天文学
4. 🏗️ 建筑与基础设施
5. 📊 商业与统计
6. 📞 呼叫
7. 🎨 设计工具
8. 📱 电子设备
9. 🧩 基本UI
10. 😄 面部表情与贴纸
11. 📄 文件
12. 📂 文件夹
13. 🍴 食物与厨房
14. 🛋️ 家居与家具
15. 👍 喜欢
16. 📝 列表
17. 🗺️ 地图与位置
18. 💊 医药
19. 💬 消息与对话
20. 💵 金钱
21. 🏞️ 自然与旅行
22. 🌐 网络与连接
23. 🗒️ 笔记
24. 🔔 通知
25. 🎓 学校
26. 🔍 搜索
27. 🛡️ 安全
28. ⚙️ 设置与微调
29. 🛒 购物与电子商务
30. ⚽ 体育
31. ✍️ 文本格式
32. ⏰ 时间
33. 🚗 运输、零件与服务
34. 👤 用户
35. 🎵 视频、音频与声音
36. 🌦️ 天气

图标图库

以下是该包中可用的 1200+ 个图标预览：

箭头

动作箭头

天文学

建筑与基础设施

商业与统计

呼叫

设计工具

电子设备

基本UI

面部表情与贴纸

文件

文件夹

食物与厨房

家居与家具

喜欢

列表

地图与位置

医药

消息与对话

金钱

自然与旅行

网络与连接

笔记

通知

学校

搜索

安全

设置与微调

购物与电子商务

体育

文本格式

时间

运输、零件与服务

用户

视频、音频与声音

天气

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 r_icon_pro 插件。

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

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

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

  // 这是你的应用根组件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'R Icon Pro Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const RIconProExampleHome(),
    );
  }
}

class RIconProExampleHome extends StatefulWidget {
  const RIconProExampleHome({super.key});

  [@override](/user/override)
  State<RIconProExampleHome> createState() => _RIconProExampleHomeState();
}

class _RIconProExampleHomeState extends State<RIconProExampleHome> {

  // 静态图标列表
  List<Icon> staticIconList = [
    const Icon(RIcon.Accessibility),
    const Icon(RIcon.Alarm),
    const Icon(RIcon.Add_Circle, color: Colors.blueAccent),
    const Icon(RIcon.Alarm_Play, size: 30),
    const Icon(RIcon.Balloon),
    const Icon(RIcon.Battery_Charge_Minimalistic),
    const Icon(RIcon.Bill),
    const Icon(RIcon.Calendar_Date),
    const Icon(RIcon.Calendar_Add),
    const Icon(RIcon.Record_Circle),
    const Icon(RIcon.Reel),
    const Icon(RIcon.Refresh),
    const Icon(RIcon.Code_File),
    const Icon(RIcon.Figma),
    const Icon(RIcon.File_Check),
    const Icon(RIcon.Paperclip_Rounded),
    const Icon(RIcon.Four_K),
    const Icon(RIcon.Pen_New_Round),
    const Icon(RIcon.Code_File),
    const Icon(RIcon.Gallery_Send),
    const Icon(RIcon.Gallery),
    const Icon(RIcon.Camera),
    const Icon(RIcon.XXX),
    const Icon(RIcon.Body),
    const Icon(RIcon.Bell),
    const Icon(RIcon.Bell_Off),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('R Icon Pro Demo')),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 15),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const Text(
              "R Icon Example",
              style: TextStyle(
                fontSize: 28,
                fontWeight: FontWeight.bold,
              ),
            ),
            const Text(
              "Take a look at some amazing examples for the RIcon pro package, We have 500+ icons available here",
              style: TextStyle(
                fontSize: 12,
                letterSpacing: .5,
                fontWeight: FontWeight.w300,
              ),
            ),

            const SizedBox(height: 20,),

            Expanded(
              child: GridView.builder(
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 4),
                itemCount: staticIconList.length,
                itemBuilder: (context, index) {
                  return Card(
                    child: staticIconList[index],
                    elevation: 1,
                  );
                },
              ),
            )
          ],
        ),
      ),
    );
  }
}