🐟 Flutter 摸鱼指南：这个插件让效率翻倍

TT_Close
112 阅读6分钟

搬砖不产生代码，只产生腰椎间盘突出。

复制粘贴、改类名、切图、手写 fromJson —— 写了 3 年 Flutter，我在这些事上浪费了 500 小时。

如果有工具能自动化，这 500 小时我可以多摸 500 小时鱼。🐟

今天介绍的这个插件，就是干这个的。

🤔 先看看能省多少时间

操作传统方式Flu CLI省时
建项目30 分钟5 秒29 分 55 秒
写一个页面3 分钟3 秒2 分 57 秒
配 App 图标30 分钟10 秒29 分 50 秒
JSON 转 Model10 分钟1 秒9 分 59 秒

一天写 5 个页面、2 个 Model，就能省 30 分钟。

一个月省 10 小时，一年省 120 小时。

这 120 小时你可以：

  • 🐟 多摸 120 小时鱼
  • 📚 学完 5 门新技术
  • ⭐ 写个开源项目涨粉
  • 🏃 或者...准点下班回家

🚀 Flu CLI 是什么？

Flu CLI 是一个 VSCode 插件，专为 Flutter 开发者设计。

核心理念：把重复性工作自动化。

三大能力：

  1. ⚡ 右键建项目 - 5 秒精装房，不用手动搭架子
  2. 📝 右键生成文件 - 告别复制粘贴，3 秒生成代码
  3. 🎨 右键配资源 - 一张图生成全平台图标

🎯 核心功能速览

功能一：右键建项目

痛点：flutter create 只给你一个空壳，然后你要花 30 分钟手动建目录、写基类、配路由...

Flu CLI 的方式:

create-project.gif

3 步搞定：

  1. 右键空文件夹 → Flu: 创建新项目
  2. 选模板（Lite/Modular/Clean/自定义）
  3. 输入项目名 → 等 5 秒，精装房到手

生成的项目长这样：

lib/
├── core/
│   ├── base/
│   │   ├── base_page.dart        # ✅ 基类写好了
│   │   └── base_viewmodel.dart   # ✅ 基类写好了
│   └── theme/
├── features/
│   └── home/                      # ✅ 示例模块有了
├── shared/
│   ├── models/
│   ├── services/
│   └── widgets/
└── main.dart

→ 详细教程：5 秒建项目

功能二：右键生成文件

痛点：写 100 个页面，就要复制粘贴 100 次？每次还要改类名、删旧代码...

Flu CLI 的方式:

generate-file.gif

支持 7 种类型：

  • 📄 Page - 完整的页面（可自动带 ViewModel）
  • 🧠 ViewModel - 状态管理
  • 📊 Model - 数据模型（可从 JSON 生成）
  • 🧩 Widget - 可复用组件
  • 📦 Component - 业务组件
  • ⚙️ Service - 服务层
  • 📁 Module - 一整个功能模块

生成的代码不是空壳，是能直接跑的：

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

  @override
  State<LoginPage> createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Login')),
      body: const Center(child: Text('Login Page')),
    );
  }
}

杀手级功能：

  • ✅ 自动继承你项目的 BasePage
  • ✅ 自动生成配套的 ViewModel
  • ✅ JSON 一键转 Model（嵌套对象自动识别）

→ 详细教程：告别 Ctrl+C/V

功能三：右键配资源

痛点：配个 App 图标要导出 30+ 张不同尺寸的图，手动放到各种目录，改各种配置文件...

Flu CLI 的方式:

app-assets.gif

3 步搞定：

  1. 右键项目根目录 → Flu: Config App Assets
  2. 选一张 1024x1024 的图 → 全平台图标自动生成
  3. 配启动图（纯色背景 + Logo）

支持配置：

资源说明
🎨 App Icon一张图生成 Android/iOS/Web/macOS/Windows 全平台
🚀 Splash启动图，支持纯色/图片背景
🌙 Dark Mode暗黑模式自动适配

→ 详细教程：图标启动图自动化

🏢 团队协作福利

痛点

  • 张三：页面放 lib/pages
  • 李四：页面放 lib/screens
  • 王五：文件后缀用 _page
  • 赵六：文件后缀用 _screen

Code Review 时想打人。

解决方案：配置文件 .flu-cli.json

{
  "generators": {
    "page": {
      "path": "lib/pages",         // 统一路径
      "fileSuffix": "_page",       // 统一后缀
      "withBasePage": true         // 自动继承基类
    }
  }
}

提交到仓库 → 所有人自动统一 → 再也不吵架

→ 详细教程：团队统一规范

📥 怎么装？

方式一：VSCode 市场搜索

打开 VSCode 扩展市场，搜索 "Flu CLI"，点击安装。

2641a260f555433df2789819981dc706.png

方式二：直接跳转

VSCode 市场链接

装完就能用，不需要额外配置。

🐟 摸鱼效率对比

场景省时摸鱼指数
建项目30 分钟 → 5 秒🐟🐟🐟🐟🐟
生成文件3 分钟 → 3 秒🐟🐟🐟🐟
JSON → Model10 分钟 → 1 秒🐟🐟🐟🐟🐟
配图标30 分钟 → 10 秒🐟🐟🐟🐟🐟
团队统一规范∞ 分钟争吵 → 0 秒🐟🐟🐟🐟🐟

总评：强烈推荐给所有想提高效率（摸鱼）的 Flutter 开发者。

📚 系列文章导航

想深入了解每个功能？看这些详细教程：

篇章标题核心内容
第一篇5 秒建项目4 种模板详解、自定义团队模板
第二篇告别 Ctrl+C/V7 种文件类型、JSON 转 Model
第三篇图标启动图自动化全平台图标、启动图、暗黑模式
第四篇团队统一规范配置文件详解、团队协作方案

🔗 相关链接

🎉 开始摸鱼吧

如果这个插件帮你省了时间，欢迎：

  • ⭐ 给 Gitee 仓库 点个 Star
  • 📢 分享给其他 Flutter 开发者
  • 💬 加群提需求，说不定下个版本就实现

祝你每天多摸 2 小时鱼！🐟🐟🐟

如果这篇文章让你想装这个插件，点个赞呗 👍

avatar
文章
阅读
粉丝