Flutter学习之旅

Flutter官网镇楼

Flutter来自Google,是移动端APP开发SDK，使用Dart语言编写一套代码即可同时在Android和iOS平台运行，性能无限接近原生，支持android 4.1以上 和 iOS8以上。想进一步了解Flutter，进入传送门(英文版)。目前虽然是alpha版，截止到2017年7月20日，其在Github上的star达5.6k+,而且相当活跃，不论是使用者还是开发工程师，都在不停的交互改善，1.6k+话题被打开，4.5k+话题被关闭，说明谷歌工程师还是很重视的。在学习过程中，遇到一些常见的问题，可以到这里来寻找帮助。 看到这些花花绿绿的标签，谷歌工程师也是用心良苦啊！同时也让我们更有信心，Flutter会越来越完善。

这里先说一下我使用的开发环境，MacBook Air,1.6 GHz Intel Core i5,8 GB 1600 MHz DDR3。下面正式进入主题。

1.下载安装Flutter SDK

直接在mac的Terminal输入命令

第一条命令：下载Flutter 第二条命令：设置环境变量 第三条命令：安装相关依赖，可重复执行 在执行命令过程中可能会失败，可能是网络原因，没关系，多试几次。 最后，Flutter SDK下载后的路径： /Users/用户名/flutter，要注意的是flutter文件夹下面有多个同名的flutter文件夹，真正的SDK路径只到顶层flutter文件夹。 对Mac系统不熟悉的同学可能找不到打开文件夹的地方，看下面GIF图就知道了。

打开文件管理

进入sdk目录

获取文件完整路径

2.安装idea编译器

下载地址 选择Community版本，下载后直接安装，很简单。

3.安装Flutter和Dart插件

打开idea，按照下图，在仓库里面搜索flutter，然后点击Install，安装的时候自动安装了Dart。

左侧菜单栏有Dart和Flutter说明这两个安装好并可以用了，右边红色方框设置Flutter SDK(这点很重要)。

4.运行

新建工程，工程名不能含大写字母，这与Android Stuidio不同。Creating Flutter Project这个界面可能会卡一会，如果不想一直等待就重新来。

如果在创建的过程中出现如下错误，那么Close Project，然后重新打开即可。

新建的工程已经默认帮我们实现了一个界面，可以直接运行，运行结果：

如果我们只想简单的实现”Hello World”，用下面的代码替换掉main.dart里面的代码即可。

解释一下：方法runAPP()的参数Center是控件树的根，控件树包含Center和Text，框架强制根控件覆盖全屏幕，因此“Hello Flutter!”在屏幕中间。

运行结果

至此，Flutter开发环境搭好了，Hello World Demo也能跑起来了。在Mac系统下这些操作还算顺利，我曾经在Wondows系统下进行同样的操作，执行Flutter Doctor的时候一直进行不下去，可能是谷歌先推出Mac版的原因吧。这是这个系列的第一篇，后面会介绍如何快速开发出一个APP。

虽然代码比较简单，这里还是给出源码，源码下载