Flutter安装
下载安装Flutter SDK
-
-
将下载的安装包zip解压到你想安装Flutter SDK的路径(如D:\flutter,注意不要将flutter安装到需要一些高权限的路径如C:\Program Files\)
-
在Flutter安装目录的flutter文件下找到flutter_console.bat,双击它,即可自动启动flutter命令行
更改环境变量
- 打开 “控制面板>用户帐户>用户帐户>更改我的环境变量”,在用户变量下新建两个条目(建议最好使用Flutter社区这个镜像,我是掉了这个坑,但注意官网说也无法保证一直可用):
- PUB_HOSTED_URL:pub.flutter-io.cn
- FLUTTER_STORAGE_BASE_URL:storage.flutter-io.cn
flutter doctor测试
终端输入:flutter doctor
该命令检查您的环境并在终端窗口中显示报告,这个命令初次运行可能会很慢,Flutter会自动安装所需依赖,并进行编译。建议科学上网。(如果有[!]x标志,表示本行检测没有通过,就需要我们设置或者安装相应的软件了)
安装Android Studio,并创建模拟器(avd虚拟机)
官网下载安装包 ,之前做react-native项目时已经安装过了,这里就不细讲了
Android Studio安装Flutter插件
打开Andorid Studio,菜单栏File => Settings => Plugins,在搜索框中输入futtler,点击安装,安装完成后,再重启一下Android Studio
安装Android证书
终端输入:flutter doctor --android-licenses(注意:提示一律输y)
到此,成功完成Flutter的安装。可以在终端输入:flutter doctor 来检查安装条目是否都成功。
运行Flutter
- 打开Android Studio,菜单栏File => New => New Flutter Project,选择第一个选项Flutter Application(flutter应用)
输入项目名称(注意:项目名称必须是小写,单词之间用下划线隔开),一直点next,最后点finish,系统即可自动创建一个Flutter项目。
-
在打开的Android Studio中可以看到上一步创建好的Flutter项目。
-
开启模拟器(右上角的ADV Manager图标按钮)
-
模拟器运行成功后,点击Android Studio右上角的debug或者run图标按钮。(此步骤需要一点时间,注意观察console区域信息,如下图表示编译成功)
-
上一步成功编译后,就可在模拟器中看到flutter应用页面了
使用VScode编写并运行Flutter应用
-
在VScode中安装Flutter插件(Dart插件已捆绑到Flutter插件中了,故无需再单独安装Dart)
-
模拟器开启下,使用VScode打开Flutter项目,在VScode终端输入:flutter run,即可在模拟器下打开该应用页面了。
VScode中调试Flutter应用
在VScode中的终端运行flutter run后,会有一段红色文字的提示,即可按下如下按键(注意:要把鼠标光标放在终端上,再按对应按键):
r 键:点击后即可热更新加载(应该是重新加载)。
p 键:显示网格,这个可以很好的掌握布局情况,工作中很有用。
o 键:切换android和ios的预览模式。
q 键:退出调试预览模式。
复制代码
若觉得按 r 键来热更新代码比较麻烦,可以开启VScode的debug模式,就可以实现真正的热更新了(修改代码保存后,即可在模拟器上立即看到页面改变效果了)