kitchen/docs/superpowers/specs/2026-04-15-flutter-runner-extension-design.md

Flutter Runner VS Code 扩展设计

概述

创建一个轻量级 VS Code 扩展，在侧边栏提供 Flutter 命令快捷按钮面板。

功能需求

按钮列表

按钮	命令	说明
▶️ Run	flutter run	运行项目
🧹 Clean	flutter clean	清理构建缓存
📦 Pub Get	flutter pub get	获取依赖
🔨 Build	flutter build <platform>	构建发布包

Build 平台选择

点击 Build 按钮后，弹出快速选择：

• APK (Android)
• IPA (iOS)
• Web
• Windows
• macOS
• Linux

技术设计

文件结构

flutter-runner/
├── package.json       # 扩展清单
├── extension.js       # 主逻辑
└── README.md          # 使用说明

核心实现

1. 命令注册：使用 vscode.commands.registerCommand()
2. 终端管理：使用 vscode.window.createTerminal() 创建/复用终端
3. 视图提供者：使用 TreeView 提供按钮列表
4. 平台选择：使用 vscode.window.showQuickPick() 弹出选择

命令执行逻辑

function runCommand(cmd) {
  const terminal = vscode.window.activeTerminal || 
                   vscode.window.createTerminal('Flutter');
  terminal.show();
  terminal.sendText(cmd);
}

界面设计

• 侧边栏视图名称：Flutter Runner
• 按钮样式：图标 + 文字，垂直排列
• 点击反馈：按钮高亮，终端自动弹出

成功标准

1. 扩展可正常安装和激活
2. 侧边栏显示 Flutter Runner 面板
3. 点击按钮在终端执行对应命令
4. Build 按钮支持平台选择