欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  科技

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

程序员文章站 2022-12-04 20:27:13
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 打开环境变量窗口,在用户变量框内点击【新建】
01(Windows系统) Flutter 开发环境搭建 -flutter系列项目教程
2.2分别新建PUB_HOSTED_UR和FLUTTER_STORAGE_BASE_URL两个变量
01(Windows系统) Flutter 开发环境搭建 -flutter系列项目教程
01(Windows系统) Flutter 开发环境搭建 -flutter系列项目教程

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

3.1下载flutter Sdk

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

01(Windows系统) Flutter 开发环境搭建 -flutter系列项目教程
3.2安装过程比较简单,只需要下一步下一步就可以,接下来,我们需要配置系统环境变量。
3.2.1双击系统变量中的path选项。

01(Windows系统) Flutter 开发环境搭建 -flutter系列项目教程
3.2.2点击【新建】
01(Windows系统) Flutter 开发环境搭建 -flutter系列项目教程
3.2.3 点击新建,新建以下两个路径
01(Windows系统) Flutter 开发环境搭建 -flutter系列项目教程

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

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

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

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

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

以下是安装过程
01(Windows系统) Flutter 开发环境搭建 -flutter系列项目教程
点击【next】
01(Windows系统) Flutter 开发环境搭建 -flutter系列项目教程
第二个是android的虚拟设备,此处可以加选也可以不加选,后期我将会使用第三方模拟器进行开发测试。
01(Windows系统) Flutter 开发环境搭建 -flutter系列项目教程
对于安装目录,我们可以新建一个文件夹用来作为专门存放。

01(Windows系统) Flutter 开发环境搭建 -flutter系列项目教程
此处询问是否要在桌面上创建快捷方式

01(Windows系统) Flutter 开发环境搭建 -flutter系列项目教程
点击【finish】完成安装

4.3配置 android sdk环境变量

新建以下两个系统环境变量
01(Windows系统) Flutter 开发环境搭建 -flutter系列项目教程

5.IDE 配置

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

点击【file】>【settings】>【plugins】,搜索 插件dart、flutter完成安装
01(Windows系统) Flutter 开发环境搭建 -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开发环境是否安装完成。
01(Windows系统) Flutter 开发环境搭建 -flutter系列项目教程

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

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