我用 AI 开发了一款跑步直播助手 App,Flutter 3天搞定

上周有个跑步主播问我：

直播跑步的时候，怎么实时展示配速、里程这些数据？

我说：用 手环或者智能手表 啊。

他说：不行，智能手表 的数据只能在手表上看，直播画面不方便。

我一想，这是个小众需求（跑步的人群再加上还要直播的，这个群体是比较少的，所以市面上也没有什么app实现这样的功能，或者这也是一个伪需求。
但是有了AI的加持，咱们可以快速的试错，所以决定还是开发一下）。

于是我花 3 天时间，用 Flutter 开发了一款 App：

跑步直播助手 — 在直播画面上实时叠加运动数据。
【有需求的可以进行内测呦，私信我进行内测】

先看功能

核心能力

• • 实时数据展示：时长、里程、配速等信息
• • 悬浮窗叠加：不影响直播软件，数据悬浮在画面上
• • GPS 定位：精准记录运动轨迹
• • 美颜滤镜：基础美颜，直播必备
• • 多种样式：多种数据展示模板可选
• • 直播画面叠加图片 ：可以在直播间做一些提示语之类的

支持平台

• • iOS
• • Android

为什么用 Flutter？

一开始我也纠结：原生还是跨平台？

最终选 Flutter，原因：

1. 1. 一套代码，两端运行 — iOS 和 Android 都能跑
2. 2. 开发效率高 — 热重载，改代码秒看效果
3. 3. UI 统一 — 两端体验一致
4. 4. 生态够用 — 摄像头、定位、悬浮窗都有现成插件
5. 5. 性能和美颜 — 比uniapp强

如果是原生开发：

• • iOS：Swift + SwiftUI
• • Android：Kotlin + Jetpack Compose
• • 两套代码，工作量翻倍

Flutter 开发：

• • 一套 Dart 代码
• • 3 天完成 MVP

技术架构

核心依赖

dependencies:
  # 摄像头
  camera: ^0.11.0

  # 定位
  location: ^7.0.0
  geolocator: ^13.0.0

  # 权限管理
  permission_handler: ^11.3.0

  # 状态管理
  provider: ^6.1.1

  # 悬浮窗
  flutter_overlay_window: ^0.5.0

  # 图像处理
  image: ^4.1.7

项目结构

lib/
├── main.dart              # 入口
└── src/
    ├── screens/           # 页面
    ├── services/          # 服务层
    │   ├── camera_service.dart      # 摄像头
    │   ├── location_service.dart    # 定位
    │   ├── running_data_service.dart # 跑步数据
    │   ├── overlay_service.dart     # 悬浮窗
    │   └── beauty_filter_service.dart # 美颜
    ├── widgets/           # 组件
    └── overlay/           # 悬浮窗 UI

关键实现

1. 悬浮窗显示

@pragma("vm:entry-point")
void overlayMain() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const OverlayWidget());
}

悬浮窗需要独立的入口点，Flutter 用 @pragma("vm:entry-point") 标记。

2. GPS 定位

Stream<Position> getLocationStream() {
  return Geolocator.getPositionStream(
    locationSettings: LocationSettings(
      accuracy: LocationAccuracy.high,
      distanceFilter: 10, // 每10米更新一次
    ),
  );
}

3. 配速计算

double calculatePace(Duration duration, double distanceKm) {
  if (distanceKm == 0) return 0;
  final minutes = duration.inSeconds / 60;
  return minutes / distanceKm; // 分钟/公里
}

AI 辅助开发

这个项目 80% 的代码是 AI 写的。

使用方式

Cursor + Claude

1. 1. 描述需求 → AI 生成代码框架
2. 2. 逐个功能实现 → AI 写具体代码
3. 3. 修复 Bug → AI 分析错误，给解决方案
4. 4. 优化性能 → AI 提建议

AI 擅长的

• • 项目结构搭建
• • 状态管理代码
• • UI 组件生成
• • 错误信息分析
• • 文档编写

AI 不擅长的

• • 特定平台的坑（iOS 权限、Android 悬浮窗）
• • 性能调优细节
• • UI 交互打磨

我的经验：AI 能帮你省 70-80% 的编码时间，但最后的 20% 还是要靠自己。

遇到的坑

坑 1：iOS 悬浮窗权限

iOS 不像 Android 有原生悬浮窗。

解决方案：用 ReplayKit + Broadcast Extension

但这需要原生代码，Flutter 插件 flutter_overlay_window 帮封装了。

坑 2：Android 后台定位

Android 后台定位需要额外权限和前台服务。

<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>

坑 3：热重载失效

某些原生插件修改后，热重载不生效。

解决：重启 App 或 flutter run 重新运行

上线准备

必需成本

iOS 上架流程

1. 注册 Apple 开发者账号

• • 访问：https://developer.apple.com
• • 费用：$99/年
• • 审核：1-2 天

2. 配置证书和 Bundle ID

# 在 Xcode 中
1. 打开 ios/Runner.xcworkspace
2. 设置 Bundle Identifier（如 com.yourname.running-live-helper）
3. 选择开发者团队
4. 自动生成证书

3. 打包上传

# Flutter 打包
flutter build ios --release

# 在 Xcode 中
1. Product → Archive
2. Distribute App → App Store Connect
3. 上传

4. 填写 App Store 信息

5. 提交审核

• • 时间：通常 1-3 天
• • 可能被拒原因：权限说明不清、崩溃、隐私政策缺失

Android 上架流程

1. 注册 Google Play 开发者账号

• • 访问：https://play.google.com/console
• • 費用：$25（一次性）
• • 需要信用卡支付

2. 配置签名证书

# 生成签名密钥
keytool -genkey -v -keystore ~/upload-keystore.jks \
  -keyalg RSA -keysize 2048 -validity 10000 \
  -alias upload

# 创建 key.properties
storePassword=你的密码
keyPassword=你的密码
keyAlias=upload
storeFile=/Users/你的用户名/upload-keystore.jks

3. 配置 build.gradle

android {
    defaultConfig {
        applicationId "com.yourname.running_live_helper"
        minSdkVersion 21
        targetSdkVersion 34
    }

    signingConfigs {
        release {
            keyAlias keystoreProperties['keyAlias']
            keyPassword keystoreProperties['keyPassword']
            storeFile file(keystoreProperties['storeFile'])
            storePassword keystoreProperties['storePassword']
        }
    }
}

4. 打包 APK/AAB

# 打包 App Bundle（推荐）
flutter build appbundle --release

# 打包 APK
flutter build apk --release

5. 创建应用并上传

1. 1. Google Play Console → 创建应用
2. 2. 填写应用信息（名称、描述、截图等）
3. 3. 上传 App Bundle
4. 4. 选择发布轨道（内部测试 → 封闭测试 → 开放测试 → 正式发布）

6. 填写商店信息

7. 提交审核

• • 时间：通常 1-7 天
• • 新账号审核可能更长（1-2 周）
• • 注意：首次提交会被人工审核，后续更新较快

Android 特殊注意事项

权限配置

<!-- AndroidManifest.xml -->
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION"/>
<uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>

64 位支持

Google Play 要求 64 位支持，Flutter 默认支持，无需额外配置。

隐私合规

• • 需要填写数据安全表单
• • 说明 App 收集哪些数据
• • 如果有定位、相机权限，需要特别说明

国内 Android 渠道（可选）

除了 Google Play，国内还可以上架：

国内渠道需要：

• • 软件著作权（可找人代办，约 ¥300）
• • ICP 备案（如有官网）
• • 隐私政策页面

技术总结

Flutter 开发 App 的优势

1. 1. 跨平台 — 一套代码两端运行
2. 2. 效率高 — 热重载，开发快
3. 3. 生态好 — 插件丰富
4. 4. 性能不错 — 接近原生体验

AI 辅助开发的建议

1. 1. 描述清晰 — AI 才能生成正确的代码
2. 2. 逐个功能实现 — 不要一次塞太多需求
3. 3. 读懂 AI 代码 — 不能盲目使用
4. 4. 最后靠自己 — AI 不能解决所有问题

欢迎加入我们的免费交流群，和大家一起讨论 AI 辅助开发、Flutter 实战等话题，文末扫码添加我好友拉你进群。