24小时用Flutter+AI开发跨平台Markdown编辑器

1. 项目背景与核心目标

去年某个周末，我突然被一个想法击中：能不能用AI辅助开发的方式，在24小时内完成一个跨平台的Markdown编辑器？这个挑战源于两个痛点：一是作为技术博主，我经常需要在不同设备间同步编辑Markdown文档；二是想验证新兴的Vibe coding开发模式在实际项目中的可行性。

Vibe coding是一种结合AI编程助手与开发者直觉的新型工作流。它不同于传统IDE开发，更强调开发者与AI工具之间的"思维共振"——通过自然语言描述需求，由AI生成代码框架，开发者再基于专业判断进行微调。这种模式特别适合快速原型开发，而Markdown编辑器正是验证其效率的理想场景。

核心目标很明确：

• 支持Windows/macOS/Linux三端运行
• 实现基础编辑功能（语法高亮、实时预览）
• 包含云同步等进阶特性
• 从零到可运行版本控制在24小时内

2. 技术选型与工具链搭建

2.1 跨平台框架对比

经过半小时的快速调研，我锁定了三个候选方案：

最终选择Flutter的原因很实际：

1. 热重载特性对快速迭代至关重要
2. 其声明式UI与Markdown的区块化展示天然契合
3. 对AI代码生成的支持度较好（特别是Dart语言）

提示：如果选择Electron，需要特别注意node_modules的膨胀问题。我曾有个项目因依赖过多导致安装包突破300MB

2.2 AI工具链配置

核心配置了三个AI辅助工具：

1. Cursor：作为主IDE，其内置的AI代码补全对Flutter支持良好
2. Claude 3：用于架构设计和异常处理逻辑生成
3. Codeium：专注Dart语法检查和代码优化

关键配置技巧：

bash复制# 在Cursor中启用实验性功能
{
  "ai.enhancedFlutterSupport": true,
  "ai.maxToken": 4096 
}

3. 核心功能实现过程

3.1 编辑器核心模块

采用分层架构设计：

code复制lib/
├── core/
│   ├── editor.dart    # 编辑控制器
│   ├── parser.dart    # Markdown解析
│   └── theme.dart     # 语法高亮
├── ui/
│   ├── desktop/       # 各平台UI适配
│   └── mobile/
└── services/
    ├── sync/          # 云同步
    └── ai/            # AI辅助写作

关键代码片段（由AI生成后优化）：

dart复制class MarkdownEditor extends StatefulWidget {
  final ValueChanged<String>? onContentChanged;
  
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        _buildEditor(),
        _buildPreviewButton(),
      ],
    );
  }

  Widget _buildEditor() {
    return TextField(
      controller: _controller,
      decoration: InputDecoration(
        hintText: 'Start writing in Markdown...',
        border: InputBorder.none,
      ),
      maxLines: null,
      onChanged: (text) {
        _parseMarkdown(text);
        onContentChanged?.call(text);
      },
    );
  }
}

3.2 多平台适配技巧

Flutter的跨平台特性虽然强大，但各平台仍有细微差异需要处理：

Windows特定问题：

• 系统菜单栏需要额外配置
• 文件路径分隔符处理（\ vs /）

macOS注意事项：

• 沙盒权限申请
• 原生标题栏样式覆盖

Linux特殊处理：

• GTK主题适配
• 系统托盘图标支持

解决方案是通过platform包进行条件编译：

dart复制import 'dart:io' show Platform;

if (Platform.isWindows) {
  // Windows特定逻辑
} else if (Platform.isMacOS) {
  // macOS菜单栏配置
}

4. AI辅助开发的实战技巧

4.1 有效提示词设计

在与AI协作时，提示词的质量直接决定产出效率。经过多次迭代，我总结出"三层提示法"：

1. 角色设定层：
   "你是一位资深的Flutter开发专家，熟悉Dart语言最佳实践和Markdown解析原理"

2. 上下文层：
   "当前正在开发跨平台Markdown编辑器，已实现基础文本输入功能，现在需要添加语法高亮支持"

3. 任务指令层：
   "请给出一个高效的实现方案，要求：支持GFM标准、性能优化考虑移动端、返回可直接使用的代码片段"

4.2 代码审查要点

AI生成的代码需要重点检查：

• 内存泄漏风险（特别是事件监听器）
• 平台特异性问题处理
• 异常边界情况覆盖

典型问题案例：

dart复制// AI生成的原始代码（存在内存泄漏风险）
document.addEventListener('keydown', handleKeyPress);

// 修正后版本
void initState() {
  super.initState();
  _subscription = keyboardEvents.listen(handleKeyPress);
}

void dispose() {
  _subscription.cancel();
  super.dispose();
}

5. 成果与性能优化

最终在18小时内完成了核心功能开发，主要时间分布：

• 环境配置：1.5h
• UI开发：6h
• 功能逻辑：7h
• 测试调试：3.5h

关键性能指标：

优化手段：

1. 懒加载语法高亮：仅渲染可视区域内容
2. 差分更新：仅重绘变更的Markdown区块
3. Isolate计算：将解析任务放到后台线程

6. 踩坑实录与经验总结

6.1 字体渲染陷阱

在Linux平台遇到中文字体显示异常问题。根本原因是Flutter默认字体配置不包含中文fallback。解决方案：

yaml复制# pubspec.yaml
flutter:
  fonts:
    - family: NotoSansSC
      fonts:
        - asset: assets/fonts/NotoSansSC-Regular.ttf

6.2 云同步时区问题

最初设计的同步机制未考虑时区差异，导致多设备间时间戳混乱。修复方案：

dart复制DateTime.now().toUtc(); // 统一使用UTC时间

这个项目让我深刻体会到，AI辅助开发不是简单的代码生成，而是：

1. 开发者需要保持架构掌控力
2. 提示工程是核心技能
3. 测试环节不可缩减
4. 性能优化仍需人工介入

最终的编辑器虽然功能简单，但完整走通了从构思到产出的全流程。这种开发模式特别适合需要快速验证想法的场景，但对于复杂业务系统，仍需谨慎评估AI生成代码的可维护性