小菜鸡开始学习flutter之十六

57 阅读3分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 10 月更文挑战」的第16天,点击查看活动详情

今日目标

在昨天我们已经配置好了我们的flutter开发环境。那如何调试你开发flutter app呢?今天就来学习android真机,虚拟机调试以及在vscode中开发flutter应用

真机调试

真机调试就是将flutter应用真实的安装到我们的android手机上。你需要具备以下条件:

  1. 准备一台Android手机
  2. 手机需要开启调试模式
  3. 通过数据线将手机连上你的电脑
  4. 电脑要允许usb调试
  5. 手机对应得sdk版本必须安装

注意:

  1. 关闭电脑上面的手机助手比如:360手机助手,应用宝等会占用adb端口得软件
  2. 关闭HBuilder之类得占用adb端口的编辑器
  3. 数据线要支持数据传输

虚拟机调试

必备条件:

  1. 准备虚拟机模拟器,虚拟机模拟器可以是Android studio自带的模拟器,也可以是第三方的模拟器。推荐大家使用第三方模拟器,因为第三方模拟器安装方便。并且运行速度快。推荐大家使用夜神模拟器

vscode配置flutter开发

如果你平常习惯用Android studio的话可以直接使用Android studio来进行日常开发,但是Android studio比较消耗电脑性能。所以推荐使用vscode来进行日常的开发

  1. VsCode中安装Flutter,Dart插件 在vscode的插件出搜索flutter和dart分别安装即可

image.png
安装红框选中的两个插件,dart会在安装flutter插件的时候自动安装,如遇dart安装失败,可手动搜索后再安装一遍。
vscode默认是不连接第三方模拟器的,我们需要打开模拟器的安装文件夹。然后运行 nox_adb.exe connect 127.0.0.1:62001
要通过cmd命令来执行

image.png
执行完成后就可以看到vscode上已经显示链接了我们的模拟器了

image.png
这个时候我们在vscode上通过终端运行flutter run就可以在模拟器上看到我们的app了 在flutter run成功后,我们在终端可以通过按r,p,o,q四个按键来调整一些东西

按键功能
r点击后热加载,更新app视图
p显示网格,让我们清楚的掌握布局情况
o切换Android和ios的预览模式
q推出调试预览模式

image.png
如果你在flutter run之后遇到上面这样的问题,这是因为sutdio和夜神使用的adb版本不一致导致的,只需将studio下的adb(在你的sdk目录下/platform-tools)复制到夜神目录下并且重名为nox_adb.exe就阔以了。

image.png
至此我们就完成了通过vscode加夜神模拟器来开发flutter应用的配置。

ending

持续学习,加油,如有不对的地方还请指正,谢谢~~