Win10下 Flutter环境完整安装记录、教程

2020-06-10   阅读:3342   类型:前端   分类:Flutter    标签: Flutter

本文主要说的是win10系统下的flutter环境安装。如果是mac系统的伙伴,可以参考另一篇文章:mac flutter 环境搭建、安装教程记录

flutter开发SDK使用git克隆仓库下载。至于git的使用不是本篇文章介绍的内容,不熟悉git的请移步git使用详细教程

一、下载flutter

在git命令行下输入如下命令:

git clone -b alpha https://github.com/flutter/flutter.git

注意: flutter的下载路径要全英文并且路径不能有空格!

执行完命令后等待下载即可。

二、 配置环境变量

在系统环境变量path中添加刚刚下载的flutter的路径。将bin文件路径添加至path中

Win10添加效果:

1.png

2.png

三、安装java jdk

https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html

四、安装android

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

1591803805697336.png

2.png

五、安装Dart插件和flutter插件

1.png

搜索Dart插件 在右侧点击Install即可。

2.png

同样的步骤搜索Flutter插件安装即可,安装完成效果:

3.png

六、创建Flutter项目

插件安装完成后,重启Android Studio新建项目会发现增加了创建Flutter项目的选项。

1.png

一路next,到这一步选择flutter路径和项目路径

2.png

3.png

最终建好的项目:

1.png

七、安装虚拟机

2.png

3.png

4.png

5.png

1591804233259330.png

1591804243802109.png

8.png

八、在vscode中安装flutter

Visual Studio Code下载地:https://code.visualstudio.com/

1.png

九、配置flutter国内镜像

中国镜像地址

国内有两个镜像可以用,一个就是官方 Flutter 社区的国内镜像,另一个是上海交通大学 Linux 用户组的镜像,建议用官方 Flutter 社区的国内镜像。

Flutter 社区

FLUTTER_STORAGE_BASE_URL: https://storage.flutter-io.cn

PUB_HOSTED_URL: https://pub.flutter-io.cn

上海交通大学 Linux 用户组

FLUTTER_STORAGE_BASE_URL: https://mirrors.sjtug.sjtu.edu.cn

PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.sjtu.edu.cn

配置方法

需要设置两个环境变量:PUB_HOSTED_URL 和 FLUTTER_STORAGE_BASE_URL。

Windows

选择新建环境变量,添加如下的两个环境变量和值:

变量名:FLUTTER_STORAGE_BASE_URL

变量值:https://storage.flutter-io.cn

变量名:PUB_HOSTED_URL

变量值:https://pub.flutter-io.cn

2.png

十、Flutter运行应用报错

4.jpg

在搭建 Flutter 环境之前,因为众所周知的原因,有可能被墙,所以需要先为 Flutter 配置中国镜像。

至此,终端下之flutter run,成功如下:

image.png

相关安装包下载地址:




腾讯云11.11上云拼团Go,2核2G3M云服务器 28元/年

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/fdetail/339.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
简忆博客壁纸一
简忆博客壁纸二
简忆博客壁纸三
简忆博客壁纸四
简忆博客壁纸五
简忆博客壁纸六
简忆博客壁纸七
简忆博客壁纸八
头像

简忆博客
勤于学习,乐于分享

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×