Flutter 即学即用系列博客——01 环境搭建

Flutter 即学即用系列博客——01 环境搭建

前言

工欲善其事,必先利其器

所以第一篇我们来说说 Flutter 环境的搭建。

笔者这边使用的是 MAC 电脑,因此以 MAC 电脑的环境搭建为例。

Windows 或者 Linux 也是类似的操作。

Flutter 有英文版的官网和中文网,大家可以根据自己的喜好和情况进行选择。

点击下面的链接可以到对应的安装页面。
Flutter 官网安装链接
Flutter 中文网安装链接

我们这边以官网为例进行说明。

目录

Flutter 即学即用系列博客——01 环境搭建

1. 配置镜像

点击进入官网,可以看到下图:

Flutter 即学即用系列博客——01 环境搭建

我们点击 Using Flutter in China 进入:

Flutter 即学即用系列博客——01 环境搭建

可以看到主要是让我们配置镜像站点。

所以我们就将要求的两个环境变量添加到系统就可以了。

打开 terminal,看下当前用户下面是否有 bash_profile 文件,执行命令:

vi ~/.bash_profile

如果底部有

"~/.bash_profile" [New File]

说明之前没有存在过这个文件。

不管之前是否存在过该文件,我们在末尾追加上面的两个环境变量即可。

如果不熟悉 vi 操作,可以参考下面两篇文章或者额外了解。
linux Vi操作和使用方法详解
Linux vi/vim

将上面两个环境变量添加到 bash_profile 文件,文件新增的两行应该类似下面(镜像地址可能有变动,以上面官网为主,笔者此刻就是下面的):

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

接着执行命令:

source ~/.bash_profile echo $PUB_HOSTED_URL

如果打印出了你输入的镜像,说明没有问题,设置成功了。

主要目的是追加两个环境变量,如果你习惯用文件打开,也可以打开文件后直接追加

回到安装页面,点击 macOS。

2. 获取 Flutter SDK

Flutter 即学即用系列博客——01 环境搭建

从图中可以看到,当前的目标是获取 Flutter SDK。

点击蓝色按钮,下载 Flutter SDK。
下载完成之后解压到自己想放置的目录(建议路径不要包含中文)。

这里假设我们将压缩包解压到的路径为 ~/flutter。

首先把下载下来的压缩包移动到 ~/flutter。
我这边下载的压缩包为flutter_macos_v1.0.0-stable.zip,执行命令

unzip flutter_macos_v1.0.0-stable.zip

执行完成之后可以看到当前目录多了一个 flutter 文件夹。
接下来就是要把 flutter 设置到环境变量以便在任何地方都可以执行 flutter 命令。
执行如下命令:

cd flutter/ pwd

控制窗口会打印 flutter 根目录。我这边为/Users/nesger/flutter/flutter。

跟上面设置两个环境变量操作类似,首先打开文件~/.bash_profile。
添加下面语句:

export FLUTTER_ROOT=http://www.likecs.com/Users/nesger/flutter/flutter export PATH=$FLUTTER_ROOT/bin:$PATH

这里定义了 flutter 根目录并将其下面的 bin 目录设置到 PATH 里面。
保存退出后执行

source ~/.bash_profile

NOTE:执行该命令后你当前窗口和新开的窗口就都可以直接运行 flutter 命令了。但是之前开的窗口就不可以了。如果需要之前的窗口也可以,就需要在对应窗口执行上面的 source ~/.bash_profile 命令

3. 执行 flutter doctor 完善相关工具链

运行

flutter doctor

会打印 flutter 需要的工具链是否完善。(NOTE: 这个命令后面会多次用到)

Flutter 即学即用系列博客——01 环境搭建

可以看出一些端倪。
显示一些警告。
按照上面提示进行处理即可。

举个例子:

✗ Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

这边说 Android licenses 没有 accepted,执行

flutter doctor --android-licenses

然后不断点击 y 表示同意就可以了。

我们运行之后,再使用

flutter doctor

可以看到已经修复了

Flutter 即学即用系列博客——01 环境搭建

接下来就是 iOS toolchain 以及 Android Studio 两个插件的安装。
对于 Android 开发来说,其实 iOS toolchain 不修复也没问题。
我们先修复 flutter 插件安装。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zyzdgd.html