Flutter安装与配置（windows）

Flutter安装

下载安装Flutter SDK

1. flutter官网下载安装包Flutter SDK

   ps: Dart SDK已经捆绑在Flutter SDK中，故无需在单独安装Dart SDK。

2. 将下载的安装包zip解压到你想安装Flutter SDK的路径（如D:\flutter，注意不要将flutter安装到需要一些高权限的路径如C:\Program Files\）

3. 在Flutter安装目录的flutter文件下找到flutter_console.bat，双击它，即可自动启动flutter命令行

更改环境变量

1. 打开 “控制面板>用户帐户>用户帐户>更改我的环境变量”，在用户变量下新建两个条目（建议最好使用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

ps：上图为已安装过了

安装Android证书

终端输入：flutter doctor --android-licenses（注意：提示一律输y）

到此，成功完成Flutter的安装。可以在终端输入：flutter doctor 来检查安装条目是否都成功。

运行Flutter

1. 打开Android Studio，菜单栏File => New => New Flutter Project，选择第一个选项Flutter Application（flutter应用）

输入项目名称（注意：项目名称必须是小写，单词之间用下划线隔开），一直点next，最后点finish，系统即可自动创建一个Flutter项目。

2. 在打开的Android Studio中可以看到上一步创建好的Flutter项目。

3. 开启模拟器（右上角的ADV Manager图标按钮）

4. 模拟器运行成功后，点击Android Studio右上角的debug或者run图标按钮。（此步骤需要一点时间，注意观察console区域信息，如下图表示编译成功）

5. 上一步成功编译后，就可在模拟器中看到flutter应用页面了

使用VScode编写并运行Flutter应用

1. 在VScode中安装Flutter插件（Dart插件已捆绑到Flutter插件中了，故无需再单独安装Dart）

2. 模拟器开启下，使用VScode打开Flutter项目，在VScode终端输入：flutter run，即可在模拟器下打开该应用页面了。

ps：打开VScode终端快捷键：ctrl+~

VScode中调试Flutter应用

在VScode中的终端运行flutter run后，会有一段红色文字的提示，即可按下如下按键（注意：要把鼠标光标放在终端上，再按对应按键）：

 r 键：点击后即可热更新加载（应该是重新加载）。
 p 键：显示网格，这个可以很好的掌握布局情况，工作中很有用。
 o 键：切换android和ios的预览模式。
 q 键：退出调试预览模式。
复制代码

若觉得按 r 键来热更新代码比较麻烦，可以开启VScode的debug模式，就可以实现真正的热更新了（修改代码保存后，即可在模拟器上立即看到页面改变效果了）

转载于:https://juejin.im/post/5c20cbbdf265da611639cd88