这里主要讲解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官网下载
• github上下载
  备注:
  个人经验，Flutter官网下载没有github下载快(你如果已经翻墙就当我没有说)。

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

图1 SDK路径

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

效果图如下:

图2

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

总结:

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 https://github.com/flutter/flutter.git
$ export PATH="$PWD/flutter/bin:$PATH"
$ cd ./flutter
$ flutter doctor

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

$ git clone -b dev https://github.com/flutter/flutter.git
$ export PATH="$PWD/flutter/bin:$PATH"
$ cd ./flutter
$ flutter doctor

二、安装编译器

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

2.1、Flutter和Dart插件安装
打开Android Studio、打开偏好设置、具体操作如下图:

图3

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

图4 图5

因为我已经安装，所以上面没有显示Install按钮。
此时，需要重新退出Android Studio，否则不生效。
备注:
这里对Android Studio是有版本要求的，要高于3.0版本，详情可以查看官网Flutter官网。

2.2、新建Flutter项目
经过上面步骤，重新打开Android Studio，如下图:

图6

图7

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

图9

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

图10

三、运行第一个程序

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

图11

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

图12

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

图13

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

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

在初次安装Android studio软件时，运行时，发现非常卡顿。虽然我的电脑配置不是太高，但是MacBook Pro那也不是盖的，足以碾压绝大数Windows电脑。
经过仔细查找资料分析，得出以下结论：
初次安装Android studio，mac会为它分配一定的运行内存，但是比较低，这就造成了即使当前mac有多余内存也不会分配给Android studio，运行软件就会卡顿，解决方案请查看解决Android Studio在MacbookPro 13下卡顿的问题，这里就不在啰嗦了。

关联文章:
Flutter学习之Dart语法

参考网址：

Flutter官网
Flutter中文网
Flutter社区中文资源

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:https://dengtar.com/18395.html