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 打开环境变量窗口,在用户变量框内点击【新建】

flutter 开发ios window flutter windows 开发 ios_flutter环境


2.2分别新建PUB_HOSTED_UR和FLUTTER_STORAGE_BASE_URL两个变量

flutter 开发ios window flutter windows 开发 ios_flutter环境_02


flutter 开发ios window flutter windows 开发 ios_Android_03

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

3.1下载flutter Sdk

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

flutter 开发ios window flutter windows 开发 ios_flutter环境_04


3.2安装过程比较简单,只需要下一步下一步就可以,接下来,我们需要配置系统环境变量。

3.2.1双击系统变量中的path选项。

flutter 开发ios window flutter windows 开发 ios_flutter环境_05


3.2.2点击【新建】

flutter 开发ios window flutter windows 开发 ios_flutter项目_06


3.2.3 点击新建,新建以下两个路径

flutter 开发ios window flutter windows 开发 ios_Android_07

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 开发所需要的。

以下是安装过程

flutter 开发ios window flutter windows 开发 ios_flutter环境_08


点击【next】

flutter 开发ios window flutter windows 开发 ios_Android_09


第二个是android的虚拟设备,此处可以加选也可以不加选,后期我将会使用第三方模拟器进行开发测试。

flutter 开发ios window flutter windows 开发 ios_flutter教程_10


对于安装目录,我们可以新建一个文件夹用来作为专门存放。

flutter 开发ios window flutter windows 开发 ios_flutter_11


此处询问是否要在桌面上创建快捷方式

flutter 开发ios window flutter windows 开发 ios_Android_12


点击【finish】完成安装

4.3配置 android sdk环境变量

新建以下两个系统环境变量

flutter 开发ios window flutter windows 开发 ios_flutter项目_13

5.IDE 配置

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

点击【file】>【settings】>【plugins】,搜索 插件dart、flutter完成安装

flutter 开发ios window flutter windows 开发 ios_Android_14


【彩蛋】

下载ide后,在安装flutter以及dart插件之前,我们可以美化一下我们的开发工具哦

6.安装第三方模拟器

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

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

4.运行 flutter doctor 命令

flutter doctor

此命令可以帮助我们检查flutter开发环境是否安装完成。

flutter 开发ios window flutter windows 开发 ios_flutter_15

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