Mikel
这里主要讲解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://www.dengtar.com/18395.html
