Flutter环境搭建以及开发软件安装

r囧r小猫 2022-01-20 05:43 265阅读 0赞

## 前言 ##

相关文章: [Flutter学习目录 ][Flutter_]

github地址：[Flutter学习][Flutter]

文章结构

*  Flutter SDK下载以及安装
    
     *  网络环境
     *  SDK下载
     *  SDK安装
     *  配置环境变量
     *  运行flutter doctor
 *  安装编译器
    
     *  Flutter和Dart插件安装
     *  新建Flutter项目
 *  运行第一个程序
 *  Android studio在mac上卡顿问题解决

## 介绍 ##

这里主要讲解Flutter基本环境搭建，目前Flutter已经正式发布，网上已经有好多关于介绍Flutter的文章。写作此文章的目的是记录自己学习过程中的点点滴滴，同时也是为了督促自己，不是为了哗众取宠。废话不多说，直奔主题！

## 一、Flutter SDK下载以及安装 ##

### 1.1、网络环境 ###

一般来说，要想安装或者依赖的某个框架，它自身也可能依赖别的框架或者组件之类的。因此，你就要将所有相关的框架或组件下载下来并进行安装。然而这些框架或组件，来源可能不是一个网站，特别是你访问的这些网站都是国外网站，如果你生活在我天朝，就不得不面临一个问题，就是访问某些国外网站会受到限制。为了避免不必要的麻烦，有以下两种方式:

*  翻墙 鄙人采用的这种方式，直接购买VPN
 *  使用镜像 庆幸，Flutter官方为中国开发者搭建了临时镜像；你只需要将**环境变量**加入到**用户环境变量**中，如下:

> $ export PUB\_HOSTED\_URL=https://pub.flutter-io.cn

> $ export FLUTTER\_STORAGE\_BASE\_URL=https://storage.flutter-io.cn

**备注：**

1、这里说的是临时镜像，是因为后期Flutter官方会推出一个新的稳定版本，到时候你只需要更换对应的地址就可以了，具体详情查看[Using Flutter in China][]。

2、这里添加环境变量添加到用户环境变量一般采用添加到**bash\_profile**文件中，全局生效(下文会详细介绍)。

### 1.2、SDK下载 ###

*  [Flutter官网下载][Flutter 1]
 *  [github上下载][github]

**备注:** 个人经验，Flutter官网下载没有github下载快(你如果已经翻墙就当我没有说)。

### 1.3、SDK安装 ###

**解压安装包到你指定的目录** 记住，这里指定好的目录以后不要轻易移动，否则就要重新配置路径。 这里我们在根目录下新建development文件夹，在development文件夹下面放置刚才的解压包，如图：

### 1.4、配置环境变量 ###

#### 1.4.1、临时环境变量配置 ####

打开终端、执行下面代码:

> $ export PATH=\`pwd\`/flutter/bin:$PATH

**备注:**

1、这段代码只对当前窗口，换句话说要是新开一个终端窗口，就不生效了。这样每次打开一个新的窗口就需要执行上述代码，实在是不方便。

2、执行这段代码需要在flutter当前目录执行，换句换说就是先执行

> $ cd /Users/yangshichuan/development

然后执行

> $ export PATH=\`pwd\`/flutter/bin:$PATH

#### 1.4.2、设置永久环境变量 ####

为了避免临时环境变量的弊端，最好设置永久环境变量。方法如下:

*  打开(或创建).bash\_profile

> $ touch $HOME/.bash\_profile

*  输入以下代码：

> $ export PATH=/Users/yangshichuan/development/flutter/bin:$PATH

这里的路径/Users/yangshichuan/development/flutter是你电脑放置flutter的绝对路径，更换为你自己的路径就好。

*  运行指令

> $ source $HOME/.bash\_profile

*  验证路径是否正确，执行指令:

> $ echo $PATH

此时不受终端窗口限制，已经和你的计算机绑定在一起了。 上面提到的配置**临时镜像路径**也可以添加到**bash\_profile**文件中。

### 1.5、运行flutter doctor ###

此命令可以帮助你查看是否需要安装其它依赖项

> $ flutter doctor

效果图如下:

因为我已经安装完所有的配置项，即使初次安装也不用担心，按照终端给出的提示可以顺利安装成功，如果其中出现安装失败，唯一可能的原因是网络不好或者需要翻墙。

### 总结: ###

1、总的来说，安装Flutter主要是：下载Flutter框架➡️指定Flutter解压路径➡️配置环境变量➡️运行flutter doctor

2、对于习惯终端操作的同学可以直接运行下面指令：

> $ export PUB\_HOSTED\_URL=https://pub.flutter-io.cn

> $ export FLUTTER\_STORAGE\_BASE\_URL=https://storage.flutter-io.cn

> $ git clone -b dev [github.com/flutter/flu…][github.com_flutter_flu]

> $ export PATH="$PWD/flutter/bin:$PATH"

> $ cd ./flutter

> $ flutter doctor

如果已经有VPN了，可以不用执行前面两句，如下：

> $ git clone -b dev [github.com/flutter/flu…][github.com_flutter_flu]

> $ export PATH="$PWD/flutter/bin:$PATH"

> $ cd ./flutter

> $ flutter doctor

## 二、安装编译器 ##

对于编译器，有好几种选择如Android Studio、IntelliJ IDEA、VS Code等。这里主要说的是[Android Studio][]的配置方法，大同小异。

### 2.1、Flutter和Dart插件安装 ###

打开Android Studio、打开偏好设置、具体操作如下图:

点击左侧标签Plugins，在右侧搜索框输入flutter/dart，搜索出相应插件，点击Install，如下图:

因为我已经安装，所以上面没有显示Install按钮。 此时，需要重新退出Android Studio，否则不生效。

**备注:**

这里对Android Studio是有版本要求的，要高于3.0版本，详情可以查看官网[Flutter官网][Flutter 2]。

### 2.2、新建Flutter项目 ###

经过上面步骤，重新打开Android Studio，如下图:

**备注:**

这里的**Flutter SDK path**指的是我们前面解压包放在的位置<这也就印证了为什么不要轻易移动SDK的原因>

点击Finish按钮，至此项目建立完成，如下图:

## 三、运行第一个程序 ##

经过以上步骤，我们已经做好所有准备工作，此时已经迫不及待想要运行以下程序，看一下效果。 经过上面创建的工程，里面会包含一个默认demo，一个简单的计数器，效果如下:

点击右上角运行按钮，查看效果：

如果想修改一下，查看实时效果，点击右上角热重载按钮：

**备注:**

最好的学习方法是下载官方[demo][]运行，看看效果，然后多思考，多模仿，后续会陆续深入学习并更新文章。

## 四、Android studio在mac上卡顿问题解决 ##

在初次安装Android studio软件时，运行时，发现非常卡顿。虽然我的电脑配置不是太高，但是MacBook Pro那也不是盖的，足以碾压绝大数Windows电脑。

**经过仔细查找资料分析，得出以下结论：**

初次安装Android studio，mac会为它分配一定的运行内存，但是比较低，这就造成了即使当前mac有多余内存也不会分配给Android studio，运行软件就会卡顿，解决方案请查看[解决Android Studio在MacbookPro 13下卡顿的问题][Android Studio_MacbookPro 13]，这里就不在啰嗦了。

## 参考网址： ##

[Flutter官网][Flutter 2]

[Flutter中文网][Flutter 3]

[Flutter社区中文资源][Flutter 4]

[Flutter学习目录][Flutter 5]

[Flutter_]: https://juejin.im/post/5c6a5a8fe51d451eb711a697
[Flutter]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FyscMichael%2FFlutter
[Using Flutter in China]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fflutter%2Fflutter%2Fwiki%2FUsing-Flutter-in-China
[Flutter 1]: https://link.juejin.im?target=https%3A%2F%2Fflutter.io%2Fdocs%2Fdevelopment%2Ftools%2Fsdk%2Farchive%3Ftab%3Dmacos%23macos
[github]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fflutter%2Fflutter%2Freleases
[github.com_flutter_flu]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fflutter%2Fflutter.git
[Android Studio]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.android.com%2Fstudio%2Findex.html
[Flutter 2]: https://link.juejin.im?target=https%3A%2F%2Fflutter.io%2F
[demo]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fflutter%2Fflutter
[Android Studio_MacbookPro 13]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2F1e8736179a44
[Flutter 3]: https://link.juejin.im?target=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3D9bWFPVzldsdHsyve0gPsIsLBn9Y0XpECmW2Y5EIYCTS-wJ53OgJQYSlFmFV7o1nQ%26amp%3Bwd%3D%26amp%3Beqid%3D8b59ffa900236e48000000065c160cd9
[Flutter 4]: https://link.juejin.im?target=https%3A%2F%2Fwww.baidu.com%2Flink%3Furl%3DKkVRvp0XvCpLCXzfS1SUPx2-N9v2scb2nrDRGQ1PhEC%26amp%3Bwd%3D%26amp%3Beqid%3D8b59ffa900236e48000000065c160cd9
[Flutter 5]: https://link.juejin.im?target=https%3A%2F%2Fwww.jianshu.com%2Fp%2F104f12c3a178