flutter安装及环境配置(windows)

前言

听闻flutter丝滑顺畅,特来亲自尝试验证,本文为安装至成功真机运行示例项目记录。

安装

https://flutterchina.club/setup-windows/
根据中文文档,安装至flutter doctor指令能运行
注意:
1.不能翻墙情况,需要配置环境变量
PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
2.配置完环境变量记得重启
3.不要将flutter安装到需要一些高权限的路径如C:\Program Files\

编译器配置

https://flutterchina.club/get-started/editor/#androidsstudio
继续按照文档,配置好编译器的对应flutter、dart插件,如果vsCode与android studio都安装了建议都配好,
android studio里的Sync Project with Gradle Files 修复gradle环境配置是真的香。

新建示例项目

https://flutterchina.club/get-started/test-drive/#androidsstudio
继续跟着文档走,创建项目,会自动拉取示例项目代码,然后打开lib/main.dart文件,编译器可能还会提示有东西要下载,等待编译器自己下载好,下载好之前可能这个文件里的代码一片红色错误提示,不要慌。

彻底下载完毕之后,尝试启动,我直接连了真机(在早期未下载完的时候,device是没有识别到的,下载完后会自动识别到真机),vsCode 在lib/main.dart文件下点F5启动(右下角device应有真机/模拟器型号,no device状态无法启动),


flutter安装及环境配置(windows)_第1张图片
flutter-vsCode-device图示.png
flutter安装及环境配置(windows)_第2张图片
flutter-vsCode启动图示.png

android studio直接debug绿色小乌龟按钮启动,


flutter-androidstudio启动图示.png

启动有时不是一帆风顺的,此时可能遇到如下2个一头雾水的报错:
1.Could not find com.android.tools.build:gradle:3.5.0
这个问题是本地gradle与项目gradle不一致导致,首先android studio 菜单 help->about

flutter安装及环境配置(windows)_第3张图片
androidStudio-gradle.png

打开项目下android\build.gradle,修改至与sudio版本号一致
gradle-修改.png

打开flutter安装目录下flutter\packages\flutter_tools\gradle,如C:\Flutter\flutter_windows_1.17.3-stable\flutter\packages\flutter_tools\gradle,找到flutter.gradle文件,修改至与sudio版本号一致
gradle-修改2.png

2.Connect to storage.googleapis.com:443
这个报错是带着一堆下载失败信息,因为不能翻墙下载对应依赖导致的,解决办法是:打开flutter安装目录flutter\packages\flutter_tools\gradle路径下flutter.gradle文件,
flutter安装及环境配置(windows)_第4张图片
download-faild-修改.png

        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' }

关于这个错误,之前也尝试过更改android\build.gradle文件对应位置,但是改完会继续报第一个错误,所以转而更改flutter下的配置文件,最后编译成功。

最后尝试了打开模拟器进行调试,毕竟我的老爷机太卡了……


flutter安装及环境配置(windows)_第5张图片
vsCode-模拟器选择.png

flutter安装及环境配置(windows)_第6张图片
androidStudio-模拟器选择.png

模拟器使用的Genymotion


flutter安装及环境配置(windows)_第7张图片
模拟器图示.png

你可能感兴趣的:(flutter安装及环境配置(windows))