【flutter】学习之路（一）环境的搭建

1、Flutter的背景

近期flutter比较热门，Flutter是谷歌的移动UI框架，能够快速在iOS和Android上构建高质量的原生用户界面。 Flutter能够与现有的代码一块儿工做。Flutter的目标是使同一套代码同时运行在Android和iOS系统上，而且拥有媲美原生应用的性能。

在Flutter诞生以前，已经有许多跨平台UI框架的方案，好比基于WebView的Cordova、AppCan等，还有使用HTML+JavaScript渲染成原生控件的React Native、Weex等。

基于WebView的框架优势很明显，它们几乎能够彻底继承现代Web开发的全部成果（丰富得多的控件库、知足各类需求的页面框架、彻底的动态化、自动化测试工具等等），固然也包括Web开发人员，不须要太多的学习和迁移成本就能够开发一个App。同时WebView框架也有一个致命（在对体验&性能有较高要求的状况下）的缺点，那就是WebView的渲染效率和JavaScript执行性能太差。再加上Android各个系统版本和设备厂商的定制，很难保证所在全部设备上都能提供一致的体验。

为了解决WebView性能差的问题，以React Native为表明的一类框架将最终渲染工做交还给了系统，虽然一样使用类HTML+JS的UI构建逻辑，可是最终会生成对应的自定义原生控件，以充分利用原生控件相对于WebView的较高的绘制效率。与此同时这种策略也将框架自己和App开发者绑在了系统的控件系统上，不只框架自己须要处理大量平台相关的逻辑，随着系统版本变化和API的变化，开发者可能也须要处理不一样平台的差别，甚至有些特性只能在部分平台上实现，这样框架的跨平台特性就会大打折扣。

Flutter则开辟了一种全新的思路，从头至尾重写一套跨平台的UI框架，包括UI控件、渲染逻辑甚至开发语言。渲染引擎依靠跨平台的Skia图形库来实现，依赖系统的只有图形绘制相关的接口，能够在最大程度上保证不一样平台、不一样设备的体验一致性，逻辑处理使用支持AOT的Dart语言，执行效率也比JavaScript高得多。

Flutter同时支持Windows、Linux和macOS操做系统做为开发环境，而且在Android Studio和VS Code两个IDE上都提供了全功能的支持。Flutter所使用的Dart语言同时支持AOT和JIT运行方式，JIT模式下还有一个备受欢迎的开发利器“热刷新”（Hot Reload），即在Android Studio中编辑Dart代码后，只须要点击保存或者“Hot Reload”按钮，就能够当即更新到正在运行的设备上，不须要从新编译App，甚至不须要重启App，当即就能够看到更新后的样式。

在Flutter中，全部功能均可以经过组合多个Widget来实现，包括对齐方式、按行排列、按列排列、网格排列甚至事件处理等等。Flutter控件主要分为两大类，StatelessWidget和StatefulWidget，StatelessWidget用来展现静态的文本或者图片，若是控件须要根据外部数据或者用户操做来改变的话，就须要使用StatefulWidget。State的概念也是来源于Facebook的流行Web框架 React ，React风格的框架中使用控件树和各自的状态来构建界面，当某个控件的状态发生变化时由框架负责对比先后状态差别而且采起最小代价来更新渲染结果。

 

2、Flutter的环境配置

上面讲了这么多，咱们也就对Flutter有了必定的认识。接下来的一步就是进行环境的配置，来进行Flutter的开发。

在Flutter中文网有详细的教程，按照步骤一步步走下去就能够了。我就按照个人安装步骤一点点简单的说一下吧。

 

（我是Mac系统，Windows系统的就不须要往下看了）

 

第一步，官网步骤是使用镜像，但我测试是不须要的，我没有使用镜像也成功了。

第二步，是去下载官方的SDK。它会默认下载到下载文件夹并解压好。

第三步，这一步比较关键，须要进行配置环境。这一步官网上写的不是很详细。我就详细说一下。

　     我使用的是命令行

vim ~/.bash_profile

在里面新增一行

export PATH=/app/flutter/bin:$PATH

PATH后面输入你的SDK的位置。就像下图中红线标的位置。我最开始~/Downloads不行 就只能写全了。

 

 在运行没有错误后就能够运行保存一下环境文件。

source ~/.bash_profile

这个时候应该能运行flutter命令了，咱们运行命令行：

flutter -h

就会看到相似这样的图

 

第四步、检查环境

仍是继续命令行

flutter doctor

此图是网上的，个人环境已经弄好了，后面会贴出。这是没有配置好的。

 

在这里咱们看到iOS环境没有装好，英文比较好的话不用我说了直接就能看懂，很差的就听我说吧。里面已经写得很详细了。×后面都写了怎么作。直接命令行copy运行就好了。这个会跟网速有关。

 

我使用的开发工具是VS Code。配置方法很简单，安装Flutter插件就行。

最后继续运行环境监测就会成下面的样子。

因为我没有进行过安卓开发，就没装安卓环境。

 

到了这一步，环境的配置就基本完成了。接下来就能够进行开发了。 

 

参考文档：

Flutter官网

Flutter中文网

国内少有的Flutter干货分享：Flutter的原理及美团的实践！

Flutter教程