Flutter即学即用环境搭建

[网页特效]纯css3云彩动画效果

效果描述： 纯CSS3实现的云彩动画飘动效果 非常逼真实用 使用方法： 1、将body中的代码部分拷贝到你的页面中 2、引入对应的CSS文件即可

前言 工欲善其事，必先利其器 以是第一篇我们来说说 Flutter 环境的搭建。 笔者这边使用的是 MAC 电脑，因此以 MAC 电脑的环境搭建为例。 Windows 或者 Linux 也是类似的操作。 Flutter 有英文版的官网和中文网，人人可以凭证自己的喜欢和情形举行选择。 点

前言

工欲善其事，必先利其器

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

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

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

Flutter 有英文版的官网和中文网，人人可以凭证自己的喜欢和情形举行选择。

点击下面的链接可以到对应的安装页面。

Flutter 官网安装链接：https://flutter.io/docs/get-started/install

Flutter 中文网安装链接：https://flutterchina.club/get-started/install/

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

目录

1. 设置镜像

点击进入官网，可以看到下图：

我们点击 Using Flutter in China 进入：

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

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

打开 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 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=/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: 这个下令后面会多次用到)

接下来就是 iOS toolchain 以及 Android Studio 两个插件的安装。

对于 Android 开发来说，实在 iOS toolchain 不修复也没问题。

我们先修复 flutter 插件安装。

NOTE：Android Studio 版本需要 3.0 或者更高版本，否则会有坑，这边为了演示一下坑及遇到的解决方式。以是这边先用版本 2.3.3 举行演示。读者最好先升级版本到 3.0。步骤是一样的。

第一步：Android Studio->Preferences

第二步：点击左侧 Plugins

第三步：输入 flutter，点击 Search in repositories

第四步：点击 Install

第五步：dart 一起安装

安装完成之后重启 Android Studio，然后在终端执行下令

flutter doctor

可以看到 Flutter 插件安装好了，只不外这里提醒版本不够新。

若是你的 Android Studio 版本为 3.0 或者更高，就不会报错，那么可以忽略下面的修复步骤。

修复步骤：

重启 Android Studio 并没有看到直接确立 Flutter 项目。

笔者这边 Android Studio 版本为 2.3.3。

而 Flutter 需要 Android Studio 3.0 或者更高版本支持。

这边更新 Android Studio 之后重启。

可以看到执行 flutter doctor 下令之后 Android Studio 确实是 3.3 版本了。

然则 Flutter 依然不是最新的，需要到 plugins 去更新。

此外，还需要更新 dart。

更新完之后就可以看到确立 Flutter 项目了。

到了这里基本上对于 Android 开发的你来说环境搭建就完成了。

4. 扩展

可以看到上面有个 iOS toolchain，基于下面几点，我想修复这个。

1. 我的机械安装了 Xcode。
2. 刚接触 Flutter，想多点实验，也想看看 Flutter 代码在 iOS 运行效果。
3. 听说 iOS 开发都用模拟器，想体验下 iOS 模拟器。
4. Android 的模拟器人人都懂，横竖我大部门是用真机调试。

以是根据上面的提醒，Xcode 完全安装以及运行响应下令。

然则遇到了一个坑，就是依然报错。

以是我直接将提醒的下令一步执行，效果可以了。

在 GitHub 上面还辅助到了一个 iOS 开发者。

flutter doctor 提醒 iOS toolchain 有些错误：https://github.com/nesger/FlutterNote/issues/1

更多环境搭建问题息争决方案人人都可以提 issue 哦~

也许别人恰好就解决了你遇到的问题