Files
aisee/技术文档/Flutter开发环境搭建.md
2026-03-02 21:26:32 +08:00

8.7 KiB
Raw Blame History

AISee Flutter 开发环境搭建指南

系统要求

  • 操作系统Windows 10/1164位
  • 内存:至少 8GB RAM推荐 16GB
  • 硬盘:至少 10GB 可用空间
  • 处理器Intel/AMD 处理器

一、安装 Flutter SDK

1. 下载 Flutter SDK

# 官网下载(可能较慢)
https://flutter.dev/docs/get-started/install/windows

# 推荐:使用国内镜像
https://flutter.cn/docs/get-started/install/windows

# 下载稳定版
flutter_windows_3.16.9-stable.zip

2. 解压 Flutter SDK

# 解压到:
C:\src\flutter

# 注意:不要放在需要管理员权限的目录(如 Program Files

3. 配置环境变量

# 1. 右键"此电脑" -> 属性 -> 高级系统设置 -> 环境变量

# 2. 在"用户变量"中新建:
变量名FLUTTER_HOME
变量值C:\src\flutter

# 3. 编辑 Path 变量,添加:
%FLUTTER_HOME%\bin
C:\src\flutter\bin\cache\dart-sdk\bin

# 4. 配置国内镜像(重要!)
变量名PUB_HOSTED_URL
变量值https://pub.flutter-io.cn

变量名FLUTTER_STORAGE_BASE_URL
变量值https://storage.flutter-io.cn

# 5. 验证
flutter --version
dart --version

4. 运行 Flutter Doctor

# 检查环境
flutter doctor

# 输出示例:
Doctor summary (to see all details, run flutter doctor -v):
[] Flutter (Channel stable, 3.16.9, on Microsoft Windows)
[!] Android toolchain - develop for Android devices
[!] Chrome - develop for the web
[!] Visual Studio - develop for Windows
[!] Android Studio (not installed)
[] VS Code (version 1.85.0)
[] Connected device (1 available)

二、安装 Android 开发环境

1. 安装 Android Studio

# 下载地址
https://developer.android.com/studio

# 安装步骤(参考之前的 Android 环境文档)
1. 安装 Android Studio
2. 安装 Android SDK (API 26-34)
3. 配置 ANDROID_HOME 环境变量

2. 安装 Android SDK 命令行工具

# 在 Android Studio 中
# Tools -> SDK Manager -> SDK Tools

勾选:
☑ Android SDK Command-line Tools
☑ Android SDK Build-Tools
☑ Android SDK Platform-Tools
☑ Android Emulator

3. 接受 Android 许可

flutter doctor --android-licenses

# 输入 y 接受所有许可

三、安装 Visual Studio Code

1. 下载安装 VS Code

# 官网
https://code.visualstudio.com/

# 下载 Windows 64-bit 版本
VSCodeUserSetup-x64-1.85.0.exe

2. 安装 Flutter 插件

# 打开 VS Code
# 按 Ctrl+Shift+X 打开扩展面板

搜索并安装:
1. Flutter自动安装 Dart 插件)
2. Dart
3. Flutter Widget Snippets可选
4. Awesome Flutter Snippets可选
5. Pubspec Assist可选

3. 配置 VS Code

# 按 Ctrl+Shift+P 打开命令面板
# 输入Flutter: New Project

# 如果能看到选项,说明配置成功

四、创建和运行测试项目

1. 创建测试项目

# 打开命令行
cd C:\Users\xdedmi\Desktop\aisee

# 创建 Flutter 项目
flutter create hello_flutter

# 进入项目目录
cd hello_flutter

# 查看项目结构
dir

2. 启动 Android 模拟器

# 查看可用设备
flutter devices

# 如果没有设备,创建模拟器
# 打开 Android Studio -> Device Manager -> Create Device

# 或使用命令行创建
flutter emulators
flutter emulators --launch <emulator_id>

3. 运行项目

# 确保模拟器已启动
flutter devices

# 运行项目
flutter run

# 或在 VS Code 中按 F5

4. 热重载测试

# 修改 lib/main.dart 中的文本
# 保存文件Ctrl+S
# 应该看到模拟器自动更新

# 或在终端按:
r - 热重载
R - 热重启
q - 退出

五、安装必要的工具

1. Git如果还没安装

# 下载
https://git-scm.com/download/win

# 安装并配置
git config --global user.name "你的名字"
git config --global user.email "你的邮箱"

2. Chrome用于 Web 调试)

# Flutter 支持 Web 开发
# 安装 Chrome 浏览器用于调试

# 启用 Web 支持
flutter config --enable-web

# 运行 Web 版本
flutter run -d chrome

六、Flutter 常用命令

项目管理

# 创建新项目
flutter create project_name

# 创建指定平台项目
flutter create --platforms=android,ios project_name

# 获取依赖
flutter pub get

# 更新依赖
flutter pub upgrade

# 清理项目
flutter clean

运行和调试

# 运行项目
flutter run

# 指定设备运行
flutter run -d <device_id>

# Release 模式运行
flutter run --release

# 查看日志
flutter logs

构建

# 构建 APK
flutter build apk

# 构建 App Bundle
flutter build appbundle

# 构建 iOS需要 macOS
flutter build ios

分析和测试

# 分析代码
flutter analyze

# 运行测试
flutter test

# 查看设备
flutter devices

# 检查环境
flutter doctor -v

七、配置国内镜像加速

永久配置(推荐)

# 在环境变量中添加:
PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

临时配置

# Windows PowerShell
$env:PUB_HOSTED_URL="https://pub.flutter-io.cn"
$env:FLUTTER_STORAGE_BASE_URL="https://storage.flutter-io.cn"

# CMD
set PUB_HOSTED_URL=https://pub.flutter-io.cn
set FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

八、常见问题解决

1. Flutter Doctor 问题

Android toolchain 问题

# 问题Android license status unknown
# 解决:
flutter doctor --android-licenses

# 问题cmdline-tools component is missing
# 解决:在 Android Studio SDK Manager 中安装 Command-line Tools

Visual Studio 问题Windows 桌面开发)

# 如果需要开发 Windows 桌面应用
# 下载安装 Visual Studio 2022 Community
# 选择"使用 C++ 的桌面开发"工作负载

2. 网络问题

# 问题:下载依赖超时
# 解决:
1. 配置国内镜像(见上文)
2. 使用代理
3. 手动下载依赖包

3. 模拟器问题

# 问题:模拟器启动失败
# 解决:
1. 检查 BIOS 虚拟化是否开启
2. 关闭 Hyper-V
3. 使用真机调试

# 问题:模拟器很慢
# 解决:
1. 使用 x86_64 镜像
2. 增加模拟器 RAM
3. 使用真机调试

4. 真机调试

# Android 真机调试步骤:
1. 手机开启开发者选项
2. 开启 USB 调试
3. 连接手机到电脑
4. 允许 USB 调试授权
5. 运行flutter devices
6. 运行flutter run

九、VS Code 快捷键

Flutter 开发常用快捷键

F5              - 启动调试
Shift+F5        - 停止调试
Ctrl+F5         - 运行(不调试)
Ctrl+Shift+F5   - 重启调试

Ctrl+S          - 保存并热重载
Ctrl+Shift+P    - 命令面板
Ctrl+Space      - 代码补全
F12             - 跳转到定义
Alt+F12         - 查看定义
Shift+F12       - 查看引用

Ctrl+/          - 注释/取消注释
Ctrl+Shift+K    - 删除行
Alt+Up/Down     - 移动行
Ctrl+D          - 选择下一个相同内容

Flutter 特定命令

# Ctrl+Shift+P 打开命令面板,输入:

Flutter: New Project          - 创建新项目
Flutter: Hot Reload          - 热重载
Flutter: Hot Restart         - 热重启
Flutter: Open DevTools       - 打开开发者工具
Flutter: Run Flutter Doctor  - 运行环境检查
Flutter: Clean Project       - 清理项目

十、开发环境检查清单

✅ Flutter SDK 安装并配置环境变量
✅ 国内镜像配置完成
✅ Android Studio 安装
✅ Android SDK 安装API 26-34
✅ Android 许可接受
✅ VS Code 安装
✅ Flutter 和 Dart 插件安装
✅ Git 安装并配置
✅ 测试项目创建并运行成功
✅ 热重载功能正常
✅ flutter doctor 无严重错误

十一、验证环境

运行完整检查

# 详细检查
flutter doctor -v

# 期望输出(至少这些项目正常):
[] Flutter (Channel stable, 3.16.9)
[] Android toolchain - develop for Android devices
[] VS Code (version 1.85.0)
[] Connected device (1 available)

# 如果有 [!] 或 [×],根据提示解决

创建并运行测试项目

# 1. 创建项目
flutter create test_app
cd test_app

# 2. 启动模拟器或连接真机
flutter devices

# 3. 运行项目
flutter run

# 4. 看到计数器应用说明环境正常

十二、下一步

环境搭建完成后:

  1. 学习 Dart 语言基础
  2. 学习 Flutter Widget
  3. 创建 AISee 项目
  4. 开始功能开发

预计时间

  • 下载安装30-60 分钟
  • 配置调试15-30 分钟
  • 总计1-2 小时

提示

  • 首次运行 flutter doctor 会下载必要组件,需要时间
  • 首次运行项目会下载 Gradle 依赖,需要耐心等待
  • 建议使用真机调试,速度更快