在 Windows 10下安装Flutter+Dart+Android Studio 配置Flutter开发环境
文章首发地址
配置环境变量
由于部分网站被墙的原因,我们需要先配置Flutter国内镜像地址,这两个地址是由Flutter官方维护的,可以放心使用
首先我们找到此电脑
点击右键,然后点击属性
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008152415434.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0MDUyMzQ=,size_16,color_FFFFFF,t_70#pic_center)
然后点击高级系统设置
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008152428302.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0MDUyMzQ=,size_16,color_FFFFFF,t_70#pic_center)
点击高级
然后找到下面的环境变量
并点击
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008152442763.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0MDUyMzQ=,size_16,color_FFFFFF,t_70#pic_center)
点击新建
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008152500391.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0MDUyMzQ=,size_16,color_FFFFFF,t_70#pic_center)
变量名输入PUB_HOSTED_URL
变量值输入 https://pub.flutter-io.cn
然后点击确定
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020100815251764.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0MDUyMzQ=,size_16,color_FFFFFF,t_70#pic_center)
继续点击 新建
变量名输入FLUTTER_STORAGE_BASE_URL
变量值输入 https://storage.flutter-io.cn
然后点击确定
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020100815253057.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0MDUyMzQ=,size_16,color_FFFFFF,t_70#pic_center)
到这里需要的环境变量就配置完成了
开始安装Flutter
-
下载安装文件并解压缩
点击进入官网下载需要的版本
如果不能打开该网站,可去我的网盘去取版本是1.22.0 提取码: awjy
下载完成后在新建一个文件夹解压缩,我这里选的是C:\src\flutter
解压成功之后,我们需要将Flutter也配置到环境变量中,flutter文件夹下的bin
目录路径(我这里是C:\src\flutter\bin
)配置到环境变量中。打开配置环境变量的步骤参考 上面的步骤配置环境变量
双击Path
来添加
![2020_10_07_find_pth](https://img-blog.csdnimg.cn/img_convert/a343f9271626a99b19ea01bce7d0e16c.png)
将C:\src\flutter\bin
配置进去
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020100815260044.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0MDUyMzQ=,size_16,color_FFFFFF,t_70#pic_center)
-
运行 flutter doctor
将路径配置之后我们打开 终端工具PowerShell
输入 flutter doctor
查看还有哪些需要配置。flutter doctor
是Flutter官方提供的用来检测当前Flutter配置环境的工具,可以快速的帮我们发现问题。
运行之后我们会看到输出如下:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008152609729.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0MDUyMzQ=,size_16,color_FFFFFF,t_70#pic_center)
很明显我们还需要安装 Android Studio
,Andriod Studio是Flutter官方支持的IDE工具。
去Andriod Studio 官网下载下载完成后,一路Next安装完成,然后启动Android Studio,第一次安装默认会安装很多依赖,这个等慢慢安装就可以了。
启动之后点击File
->Settings
![在这里插入图片描述](https://img-blog.csdnimg.cn/2020100815262233.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0MDUyMzQ=,size_16,color_FFFFFF,t_70#pic_center)
找到Plugins
在输入框内输入Flutter
点击安装
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008152632566.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0MDUyMzQ=,size_16,color_FFFFFF,t_70#pic_center)
安装Flutter
的时候默认会要求安装Dart
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008152641374.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0MDUyMzQ=,size_16,color_FFFFFF,t_70#pic_center)
安装后重启 Andriod Studio
然后我们把Android SDK
路径配置到系统变量里面
我们先找到File
->Other Settings
->Default Project Structure..
并点击
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008152656123.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0MDUyMzQ=,size_16,color_FFFFFF,t_70#pic_center)
找到SDK的路径
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008152716976.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0MDUyMzQ=,size_16,color_FFFFFF,t_70#pic_center)
进入到文件下找到SDK文件夹有一个platform-tools
的文件夹,复制这个路径添加到系统Path
中
变量名是ANDROID_HOME
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008152726540.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0MDUyMzQ=,size_16,color_FFFFFF,t_70#pic_center)
这时候我们再执行一次 flutter doctor
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008152742938.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0MDUyMzQ=,size_16,color_FFFFFF,t_70#pic_center)
现在我们只需要再执行一次 flutter doctor --android-licenses
弹出的提示选择y
或者是直接回车
即可。
然后再运行一次flutter doctor
已经没有错误提示了。
这样我们的Flutter的环境就配置完成了。
安装Android 模拟器
打开Android Studio 找到右上角的AVD Manager
并点击
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008152758644.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0MDUyMzQ=,size_16,color_FFFFFF,t_70#pic_center)
点击Create Virtual Device...
选择一个我们需要需要安装的模拟器,然后点击Next
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008152810854.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0MDUyMzQ=,size_16,color_FFFFFF,t_70#pic_center)
在配置页面选择Hardware - GLES 2.0
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008152822241.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0MDUyMzQ=,size_16,color_FFFFFF,t_70#pic_center)
新建Flutter项目并运行
点击Android Studio 里面的 File
->New
->New Flutter Project
新建项目并打开
选择我们刚刚安装好的模拟器,并且点击运行 就可以看到效果啦!
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008152832433.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0MDUyMzQ=,size_16,color_FFFFFF,t_70#pic_center)
可能会遇到的问题
在执行 flutter doctor --android-licenses
出现以下错误
![2020_10_07_fluuter_sdk_error](https://img-blog.csdnimg.cn/img_convert/7521b4e5a6344aa48c35c0a4d560dc24.png)
需要我们手动安装Android SDK Platform-Tools
打开Android Studio 点击File
->Settings
->Android SDK
找到Android SDK Platform-Tools
安装即可!
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201008152844621.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI0MDUyMzQ=,size_16,color_FFFFFF,t_70#pic_center)