Flutter快坑我:图解环境搭建(windows)

4,199 阅读4分钟



一、获取 Flutter SDK


参考:flutter中文社区

(https://flutter.cn/docs/get-started/install/windows)

  • 将压缩包解压,然后把其中的 flutter 目录整个放在你预想的 Flutter SDK 安装目录中(比如 D:\flutter;请勿将该目录放在一些需要额外操作权限的目录,比如 C:\Program Files\)。
  • 找到 flutter 目录中的 flutter_console.bat 文件,双击执行该批处理脚本

二、更新环境变量

1. 在用户变量 一栏中,检查是否有 Path 这个条目:

  • 如果存在,直接把 flutter\bin 目录的完整路径以 ; 作为分隔加到已有的值后面。
  • 如果不存在的话,在用户环境变量中创建一个新的 Path 变量,然后将 flutter\bin 所在的完整路径作为新变量的值。



2. 为 Flutter 设定镜像配置

  • 参考: 在中国网络环境下使用 Flutter (https://flutter.cn/community/china),强烈建议优先配置这一步
  • 在用户变量 一栏中,新建用户环境变量:
    • PUB_HOSTED_URL -> https://pub.flutter-io.cn
    • FLUTTER_STORAGE_BASE_URL -> https://storage.flutter-io.cn



三、 下载并安装 Android Studio

准备

    • 新建一个文件夹,比如 D:\android,分别新建androidSDK、androidStudio当做对应的存放路径


下载地址:Android Studio

(https://developer.android.google.cn/studio/)

安装参考:android studio安装详解

(https://www.jianshu.com/p/de318c8a0fc6)

    • 注意软件和SDK的安装路径请配置成上面第一步准备好的路径;
    • 这一步左边的选项请全部勾选


四、安装 Flutter 和 Dart 插件

安装过程如下:

  1. 打开 Android Studio。

  2. 打开插件设置(Windows 系统打开 File > Settings > Plugins)。

  3. 选择 Marketplace,然后选择 Flutter 插件并点击 安装。

  4. 当弹出安装 Dart 插件提示时,点击 Yes。

  5. 当弹出重新启动提示时,点击 Restart。

五、检查安装环境

1. androidSDK路径

2. dartSDK路径


3. flutterSDK路径

4. 检查之前配置的用户环境变量是否生效

5. 运行 flutter doctor

  1. 打开一个新的控制台窗口,然后输入flutter doctor执行。如果它提示有任何的平台相关依赖,那么你就需要按照指示完成这些配置;比如:上述错误如果在安装完成AS以及检查了以上配置后任然存在,可能是flutter的配置不正确,解决方法:
    • 启动Flutter目录下的flutter_console.bat,执行下面的命令
    • flutter config --android-sdk=" /path/to/android/sdk "(androidSDK路径)
    • flutter config --android-studio-dir=" /path/to/android/studio "(AS路径)
  2. 如果是以下提示,就基本没有问题了

六、创建应用

  1. 新建Flutter项目

  2. 选择 Flutter 应用程序 作为项目类型,然后点 下一步

  3. 输入项目名称(比如 ‘myapp’)确认 Flutter SDK 路径 区域所示路径是正确的 SDK 路径。就是之前下载好的flutterSDK

  4. 点击 完成。

七、运行项目

准备:确保Virtualization Technology (VTx)和Virtualization Technology for Directed I/O (VTd)已经打开,没有的话,参照下面步骤,否则无法连接虚拟或者真实手机设备

  • 开机时不断点击F10键进入BIOS,选择Advanced(高级)然后选择System Options(系统选项),点击回车
  • 然后选择Virtualization Technology (VTx)和Virtualization Technology for Directed I/O (VTd)勾选,点击save(保存),退出即可

可以选择虚拟设备或者用USB连接真实设备,手机必须开启USB调试



坑坑坑坑坑坑坑坑坑坑坑坑!!!


1. 点击启动调试的时候,提示:

No connected devices found; please connect a device, or see flutter.io/setup

解决:

  • 确保 五、检查安装环境都正确
  • 确保BIOS下VTx和VTd已经打开
  • 确保以管理员身份打开Android studio
  • 如果是连接真机,请确保USB调试、USB安装都已经打开


2. flutter doctor检查报错


解决:

启动Flutter目录下的flutter_console.bat,执行下面的命令

flutter config --android-sdk=" /path/to/android/sdk "(androidSDK路径)

flutter config --android-studio-dir=" /path/to/android/studio "(AS路径)



3. Android studio创建模拟器报错“Enable VT-x in your Bios Security Settings”

  • 开机时不断点击F10键进入BIOS,选择Advanced(高级)然后选择System Options(系统选项),点击回车
  • 然后选择Virtualization Technology (VTx)和Virtualization Technology for Directed I/O (VTd)勾选,点击save(保存),退出即可



4. 第一次运行 会卡在 Resovle ...中很长时间,然后就会报错。

Finished with error: ProcessException: Process "E:\code\flutter_app" exited abnormally: Downloading https://services.gradle.org/distributions/gradle-4.10.2-all.zip Unzipping

问题原因:flutter 需要梯子在jcenter和google库里下载依赖,因为google被墙访问不到,所以会在那里一直处于下载状态,但又下载不了。


办法一: 参考 2. 为 Flutter 设定镜像配置

办法二:

maven{ url 'https://maven.aliyun.com/repository/google' }

maven{ url 'https://maven.aliyun.com/repository/jcenter' }

maven{url 'http://maven.aliyun.com/nexus/content/groups/public'}

  •  需要再你app 里的build.gradle 的两个地方加 阿里云的镜像
  • 需要在你flutter sdk 的 如下路径 下的 flutter.gradle 也同样添加镜像。 这里是我的Flutter SDK .gradle路径 打开后添加的镜像 




5. 卡在:Installing build\app\outputs\apk\app.apk..., 无法热更新代码


解决: 

  • 确保 五、检查安装环境都正确
  • 确保有管理员权限且管理员身份打开Android studio
  • 如果是连接真机,请确保USB调试、USB安装都已经打开