当前位置: 移动技术网 > 科技>操作系统>windows > 01(Windows系统) Flutter 开发环境搭建 -flutter系列项目教程

01(Windows系统) Flutter 开发环境搭建 -flutter系列项目教程

2020年10月09日  | 移动技术网科技  | 我要评论
flutter零基础到项目实战教程第一节:图解Flutter 开发环境搭建1.安装githttps://git-scm.com/2.设置镜像https://flutter.dev/community/china由于在国内访问 Flutter 有时可能会受到限制,Flutter 官方为中国开发者搭建了临时镜像,我们可以将如下环境变量加入到用户环境变量中:export PUB_HOSTED_UR=https://pub.flutter-io.cnexport FLUTTER_STORAGE_

flutter零基础到项目实战教程

第一节:图解Flutter 开发环境搭建

1.安装git

https://git-scm.com/

2.设置镜像

https://flutter.dev/community/china

由于在国内访问 Flutter 有时可能会受到限制,Flutter 官方为中国开发者搭建了临时镜像,我们可以将如下环境变量加入到用户环境变量中:

export PUB_HOSTED_UR=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

2.1 打开环境变量窗口,在用户变量框内点击【新建】
在这里插入图片描述
2.2分别新建PUB_HOSTED_UR和FLUTTER_STORAGE_BASE_URL两个变量
在这里插入图片描述
在这里插入图片描述

3.获取 Flutter SDK并配置环境变量

3.1下载flutter Sdk

https://flutter.dev/docs/get-started/install/windows

在这里插入图片描述
3.2安装过程比较简单,只需要下一步下一步就可以,接下来,我们需要配置系统环境变量。
3.2.1双击系统变量中的path选项。

在这里插入图片描述
3.2.2点击【新建】
在这里插入图片描述
3.2.3 点击新建,新建以下两个路径
在这里插入图片描述

4.Android Studio安装并配置环境变量

Flutter 依赖于 Android Studio 的全量安装。Android Studio 不仅可以管理 Android 平台依赖、SDK 版本等,而且它也是 Flutter 开发推荐的 IDE 之一(当然,我们可以使用其它编辑器或 IDE,我们将在往下再讨论)

**4.1.**下载并安装 Android Studio,下载地址:

https://developer.android.com/studio/ 

4.2. 启动 Android Studio,然后执行“Android Studio 安装向导”。这将安装最新的 Android SDK、Android SDK 平台工具和 Android SDK 构建工具,这些是用 Flutter 进行 Android 开发所需要的。

以下是安装过程
在这里插入图片描述
点击【next】
在这里插入图片描述
第二个是android的虚拟设备,此处可以加选也可以不加选,后期我将会使用第三方模拟器进行开发测试。
在这里插入图片描述
对于安装目录,我们可以新建一个文件夹用来作为专门存放。

在这里插入图片描述
此处询问是否要在桌面上创建快捷方式


点击【finish】完成安装

4.3配置 android sdk环境变量

新建以下两个系统环境变量
在这里插入图片描述

5.IDE 配置

开发工具可以选择android studio 、vscode或者是IDE,这三个工具只需要安装flutter以及dart插件即可。个人比较喜欢IDE,故在这里演示IDE的配置。

点击【file】>【settings】>【plugins】,搜索 插件dart、flutter完成安装
在这里插入图片描述
【彩蛋】
下载ide后,在安装flutter以及dart插件之前,我们可以美化一下我们的开发工具哦

https://blog.csdn.net/weixin_39553363/article/details/104352319?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160221378519195240441883%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160221378519195240441883&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v1~rank_blog_v1-7-104352319.pc_v1_rank_blog_v1&utm_term=flutter&spm=1018.2118.3001.4187

6.安装第三方模拟器

因为第三方模拟器直接安装完就可以使用了,非常方便,这里推荐初学者使用。

可以参考我之前的一篇博客

https://blog.csdn.net/weixin_39553363/article/details/104338142?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522160221457219195240435470%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=160221457219195240435470&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v1~rank_blog_v1-1-104338142.pc_v1_rank_blog_v1&utm_term=%E6%A8%A1%E6%8B%9F%E5%99%A8&spm=1018.2118.3001.4187

4.运行 flutter doctor 命令

 flutter doctor 

此命令可以帮助我们检查flutter开发环境是否安装完成。
在这里插入图片描述

如果不明白欢迎在下方留言~~~~

本文地址:https://blog.csdn.net/weixin_39553363/article/details/108973649

如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

相关文章:

验证码:
移动技术网