Flutter开发艺术之旅 一 flutter环境的搭建、运行

开篇：

• Flutter简介：

• 2018年2月27日，谷歌发布了flutter,官方的解释：“Build beautiful native apps in record time”：以最短的时间构建优质的原生App,也就是说可以通过一套代码生成android和ios两个平台的app, 有点类似于RN? 下面我们跟随官方文档一探究竟：

• Flutter官方网站(英文): flutter官网

  安装开发环境

  支持平台：mac、windows、linux

• flutter是基于dart语言，如果不熟悉的可以看一下官方文档 Dart官方文档，其实语法和Java很类似，有java开发经验的很容易上手，SDK可以在文档的Get Started下载
  
• 我的系统是mac ,下载完成后是一个压缩包，大约600mb，直接解压即可，然后将bin目录加入到环境变量：
  touch ~/.bash_profile
  open -t ~/.bash_profile
  然后xxx/flutter/bin加入保存即可！
  打开终端：输入flutter doctor，不提示找不到命令，即表示环境配置完成，此命令是检测你本机的环境是否安装完整，比如 android环境 ios环境等。

安装插件

支持平台：Android & vscode
下面以AndroidStudio为例：
1. 安装 ： 打开设置->插件,搜索flutter,点击安装,首次安装会提示安装dart，点击确定即可，如果安装不上，多试几次，也可能需要梯子，这里不做介绍。
2. 创建 ： 安装之后重启as,发现以下界面说明安装成功，选择start new flutter project->Flutter Application接下来就是和创建Android项目类似，下一步然后等待创建完成。

3. 运行： 创建完成后，如果一切正常将会看到main.dart文件已被打开，然后我们选择设备，这里如果安装了xcode,将会看到ios设备，还会看到创建过的avd,这里我们选择ios模拟器，然后点击绿色的按钮运行，如果控制台报错，应该就是某些环境没有配置好，控制台会给出相应的安装方式， 安装后重新运行即可，成功后如下图：

下面是Android和ios的共同显示效果

4. 热更新： 可以看出两者在UI方面还是遵循谷歌Material设计语言，可以看到在安卓上常见的Toolbar、FloatingActionButton等组件，从运行情况上来看，两者并没有什么差别，flutter一个非常重要的特性就是热更新，更改代码后，模拟器会立即做出反应，下面我们简单修改一下代码，在屏幕中显示一个对话框，来体验一下这种热更新：

可以看到两个模拟器立即更新了页面，体验上还是Nice的,特别是对于原生开发者来说，不用再去频繁的install,这种既改即现的模式，还是极大地提升了我们开发的效率。

总结

环境搭建还是挺简单的，没有RN这么多坑，总体运行效率还是挺不错的，从代码层面上来看，有一些杂乱，全是括号… 我不是很喜欢这种语言风格，不过上手并不困难，我也没有看过dart的文档，界面绘制全是通过代码控制，项目大了可能会导致代码量过多，不过就目前来看，前景还是很好的。毕竟是Google出品，值得我们去期待flutter的未来，希望flutter越走越远！