Flutter的环境搭建和配置

客官°小女子只卖身不卖艺 2022-05-15 05:42 223阅读 0赞

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。由于在中国没办法翻墙直接下载相应的资源，只能翻墙。

现在我们常用的Android开发工具为androidstudio,相比着eclipse给我们带来啦更大的便利，提高开发效率，但是使用Androidstudio的 安装环境还是有要求的。必须 要window7系统 +4G内存，flutter的安装使用也是有环境要求的，需满足windows7以上系统和硬盘空间大小400M以上 。

[flutter中文官网：https://flutterchina.club][flutter_https_flutterchina.club]

第一步：在安装使用flutter之前，需要安装git代码管理工具（如有安装可以跳过）

[从git官网下载flutter资料https://git-scm.com/download/win ][git_flutter_https_git-scm.com_download_win]

第二步：找到从github上下载下来的flutter文件夹，找到flutter\_console.bat这个文件，便说明没下载没问题。

![70][]

第三步：配置flutter系统环境变量

1）、去找开始中-windows系统中的控制面板

![70 1][]

2）、再去找账户-账户-更改我的环境变量-在系统path中添加flutter中bin所在的路径

第四步：安装flutter

在刚下载的flutter目录下找到flutter\_console.bat文件，双击可运行文件,(这里网上有好几种方法进行flutter的安装,比如说打开运行,输入powerShell,然后运行flutter doctor,我试过都有问题,还是用官网的这种方法最靠谱)，然后输入指令:flutter doctor，即可自动安装，这个是官网推荐的方法，很靠谱。但是由于我们的国策，使用上面那种方法会一直处于以下的界面：

![70 2][]

最后直接显示超时：

![70 3][]

所以，我们使用国内镜像的地址去下载： 在输入flutter docter之前输入以下两句：

1）命令行输入第一条： set PUB\_HOSTED\_URL=https://pub.flutter-io.cn

2）命令行输入第二条：set FLUTTER\_STORAGE\_BASE\_URL=https://storage.flutter-io.cn

3）再次输入flutter doctor 命令即可执行成功

以上完美解决：Got socket error trying to find package mockito at https://pub.dartlang.org.这个问题。

![70 4][]

![70 5][]

出现这个安装成功。

第五步：打开Androidstudio ,ctrl+s+alt打开安装插件界面或者找File-->setting也可；

![70 6][]

同样安装dart插件，之后重启即可。

第六步：配置flutter sdk和dart sdk的位置

同上查找ctrl+alt+s打开设置中的languages下的flutter和dart即可，配置相关的sdk

如下：dart-sdk的配置，找下载的flutter -->bin\_cache-->dart-sdk的路径就好

![70 7][]

flutter sdk的配置：flutter的下载位置

![70 8][]

接下来就可以开启，flutter之旅啦。

[flutter_https_flutterchina.club]: https://flutterchina.club
[git_flutter_https_git-scm.com_download_win]: https://git-scm.com/download/win%C2%A0
[70]: /images/20220515/90723308a11649b5a50731b8840f2955.png
[70 1]: /images/20220515/7c3967e35ec54a98b57c667b7fb1b1ad.png
[70 2]: /images/20220515/4536b8d33c1a47fc81be3aaa0c502737.png
[70 3]: /images/20220515/21620ecba6d14cf0819378a0a9e4a8b0.png
[70 4]: /images/20220515/4569cf47cd1d4b64823441aeedbd108b.png
[70 5]: /images/20220515/722db598fded47c4b95c256c3c1f0e13.png
[70 6]: /images/20220515/9b077bab6a2a41518a03c7b77e9290fa.png
[70 7]: /images/20220515/a9c8ace061b04cc29ea371463ed01ac8.png
[70 8]: /images/20220515/ba29c1dcb92f4f649cc477d0a6d50288.png