Flutter项目运行到现代浏览器、模拟器、真机

需要提前配置好Flutter环境变量以及sdk初始化，参考官方文档（https://docs.flutter.cn/get-started/quick）

使用Android Studio编辑器安装后自带的adb、emulator等命令

一、Web 平台部署：现代浏览器（Edge、Chrome）快速测试

1.1 通过 VS Code 快速部署

在 VS Code 中的操作步骤：

1. 安装 Flutter 插件
2. 如果没有创建项目，创建项目
   1. 按Ctrl+Shift+P打开命令输入框
   2. 输入或选择"Flutter: New Project"
   3. 选择"Application"创建基于Dart的项目，选择"Empty Application"基于Kotlin或Java的项目
3. 选择运行设备：
   • 按Ctrl+Shift+P打开命令输入框
   • 输入或选择 "Flutter: Select Device"
   • 选择 "Edge" 或 "Chrome"
4. 运行应用：按F5启动调试模式

二、运行到Android 模拟器命令行操作详解

2.1 环境准备与设备连接

模拟器使用Android Studio编辑器自带的模拟器

1. 列出本地的安卓模拟器，如果模拟器未启动，先启动，命令行启动方式：

emulator devices

或者

emulator -list-avds

启动模拟器——

emulator -avd ID

2. Flutter项目根目录运行应用到指定设备

flutter run -d device_id

（这里的device_id是adb devices下输出的第一列，或flutter devices命令输出的第二列，如下图的emulator-5554）

3. 修改代码后鼠标聚焦编辑器输出控制台，局部刷新按r，应用重启按R

三、通过无线网运行到真机

3.1 手机打开无线调试

1.  和电脑连接同一个WIFI
2.  手机设置激活开发者选项
3.  进入打开无线调试
4. 查看IP及端口

3.2 命令行运行到真机

1. 连接真机

adb connect [你的IP地址]:[你的端口号]

2. 选择运行设备：

• 按Ctrl+Shift+P打开命令输入框
• 输入或选择 "Flutter: Select Device"
• 选择真机（wireless）
• 调试器选择Dart & Flutter，初次运行可能需要挂梯安装调试器工具
• 手机上点同意继续

四、自动热重载

4.1 热重载与热重启区别

热重载（Hot Reload）：

• 保持应用状态：变量值、路由栈、用户输入全部保留
• 快速更新：1-2秒内完成
• 触发方式：VS Code 终端按r
• 适用场景：UI 调整、样式修改、业务逻辑微调

热重启（Hot Restart）：

• 重置应用状态：从main()重新开始
• 较慢更新：5-10秒完成
• 触发方式：VS Code 终端按R（大写）
• 适用场景：修改main()函数、更改初始化逻辑

4.2 VS Code 自动热重载配置

实现保存文件时自动热重载，两个前提：1、已安装Flutter插件，2、debug模式（vscode中按F5，或者Ctrl+Shift+D——左侧栏运行面板点击运行）：

1. 打开 VS Code 设置：
   • 方法一：Ctrl+,直接打开设置
   • 方法二：命令面板输入 "Preferences: Open Settings"
2. 配置 Flutter 热重载：

        将flutterHotReloadOnSave设置为allDirty

4.3 调试快捷键

快捷键	功能	使用场景
F5	启动调试	开始开发会话
Ctrl+F5	不调试运行	快速查看效果
Shift+F5	停止调试	结束开发会话
Ctrl+Shift+P	命令面板	执行各种命令
r	热重载	快速查看 UI 修改
R	热重启	重置应用状态
p	显示网格	调试布局
o	切换 Android 轮廓	查看视图边界

参考资料：

• Flutter 官方文档：热重载
• Flutter 官方文档：Web 支持
• VS Code Flutter 扩展文档
• Dart DevTools 使用指南