在使用Flutter开发之前，我是一个标准的iOS开发人员。我至今认为苹果的整个体系，甚至整个技术框架都是业内最牛逼，最完善的，你甚至挑不出太多毛病。尤其在苹果发布Swift并宣布开源后，苹果的整个技术生态体系已到顶峰（Swift甚至可以用来做Web后端的开发，并且被谷歌人工智能团队所采取作为首选语言）。但是，iOS开发中也有一些不足之处：
- 在Swift发布之前，所有的苹果体系都是采用Objective-C，C，C++作为开发语言，尤其OC语法繁琐，开发效率极低；
- 平台限制严重，你需要准备以下必要设备：Mac电脑，iPhone手机，Apple开发者账号（99美刀），一套组合拳下来大致需要2W人民币；
- 岗位需求逐年降低，大部分的iOS开发都转到了后端或者跨平台开发。
基于以上原因，我尝试了学习一些跨平台的技术，最终确定了Flutter，着实让人惊艳，以下为我学习中最直观的感受：
- 你甚至可以完全不懂Android和iOS即可进行开发；
- Flutter SDK的分层架构清晰，入门简单，上手快；
- 参考了React的状态管理设计，只用关注用户界面和业务逻辑，不用花功夫在状态维护上；
- 第三方插件，组件丰富，90%以上的开发需求都能在Flutter插件&组件市场找到；
舒适区待的太久，灾难降临时，你已无从躲避。作为一个移动开发人员，你应该掌握一项必杀技，对我而言，Flutter是一个不错的选择。
本篇解决问题
如果以下问题都知道，可跳过本文档。
- 对原生开发，Hybrid了解有多少？
- Flutter不同版本（Stable，Beta，Dev，Master）的特点？
flutter doctor命令是做什么用的？- 配置Android Studio还需要额外下载SDK吗？为什么？
- 如何在Win上配置Flutter和Android环境变量？
原生开发，Hybrid，Flutter对比
在Flutter出现之前，App开发一般就两种形式：纯原生以及混合（Hybrid）开发，随着Flutter在2018年发布第一个预览版本后，俨然形成了三分天下的局面。
/ 原生开发 /
原生开发特指一套代码跑在单独的一个操作系统上，比如可以使用Java或者Kotlin开发Android平台应用，使用Objective-C或者Swift开发iOS平台应用，目前移动操作系统基本被Android和iOS瓜分。原生开发的显著特点就是，可以通过代码直接使用平台所提供的SDK（软件开发工具包，是一整套功能丰富的API集合），两个平台的工具集分为Android SDK与Cocoa Touch。
原生开发的优势：
- 无障碍访问平台所有功能，如蓝牙，录音，定位，传感器等；
- 因为直接访问原生API，所以运行速度快，性能高，可以实现非常复杂的动画效果和交互。
原生开发的缺点：
- 平台特定，一套代码只能在一端运行，所以对于企业而言，开发及维护成本相对较高；
- 原生开发，一旦有功能变动，需要重新打包发布，动态下发能力（热更新）差。
/ Hybrid /
如今，移动互联网逐渐成熟，纯原生开发已经很难应对各种变态需求。针对开发成本，动态内容的问题，衍生了一些基于前端技术栈的一些跨平台框架。
- H5 + 原生
- JavaScript开发 + 原生渲染
H5 + 原生的开发形式，目前是混合开发的主流。使用原生技术搭建APP框架，使用H5动态下发内容。由于H5代码只需要一次开发，就能同时在Android和iOS两个平台运行，这也可以减小开发成本。也就是说，H5部分功能越多，开发成本就越小。我们称这种H5+原生的开发模式为混合开发 ，采用混合模式开发的APP我们称之为混合应用或Hybrid APP ，如果一个应用的大多数功能都是H5实现的话，我们称其为Web APP 。混合开发的技术难点主要是原生和H5之间的交互。一般情况下，我们称H5与原生交互的方式叫JSBridge。
JavaScript开发 + 原生渲染的开发方式目前特指Facebook开源的React Native以及阿里开源的Weex。其核心技术点就是：把DOM树映射会原生的控件树。框架会把DOM树自动的转化为不同平台的控件树，其最终还是调用的原生API来绘制。
混合开发的优点：
- 社区庞大，开发成本低；
- 使用前端技术框架，原生渲染，性能尚可；
- 支持热更新；（目前iOS端有风险，热更新应用禁止上架App Store）。
混合开发的缺点：
- 因为要和原生通信，难以胜任复杂的绘制和动画工作；
- JS为脚本语言，解释执行，性能和原生开发编译后运行，有一定差距；
- 调用系统硬件功能非常麻烦。
/ Flutter /
鉴于Hybrid的一些缺点，谷歌开源了Flutter框架。Flutter是Google发布的一个用于创建跨平台、高性能移动应用的框架。Flutter使用自绘引擎，使用自身的布局、绘制系统。
Flutter的优点：
- 生态活跃，目前GitHub的Flutter项目Star高达84.5K;
- 大厂支持；
- 采用Dart语言开发（后面会讲一些Dart的特点，及Flutter中需要知道的Dart知识）；
- 开发效率高，Flutter同时支持JIT（解释执行，开发模式下）和AOT（编译后执行，生产环境）两种运行模式。
盗用一个表格，三种开发方式的高下立判：
上表中开发语言主要指UI的开发语言。而开发效率，是指整个开发周期的效率，包括编码时间、调试时间、以及排错、兼容时间。动态化主要指是否支持动态下发代码和是否支持热更新。值得注意的是Flutter的Release包默认是使用Dart AOT模式编译的，所以不支持动态化，但Dart还有JIT或snapshot运行方式，这些模式都是支持动态化的。
官方文档中有一张Flutter框架图示，我觉得非常清晰的描述了整个框架的层级：
从上到下依次为：
- Flutter Framework是纯Dart语言实现的SDK，是开发中用到的基础库，一般只接触到此层级，封装了很多常用的控件和动画效果（类似于前端的各种元素标签，甚至连布局系统都参考的Flex布局）；
- Flutter Engine是一个纯C++实现的SDK，其中包括Skia引擎（二维绘图引擎，Android底层绘图引擎也是这玩意儿），Dart运行时，文字排版引擎等；调用Flutter Framewrok中的控件时，最终会走到Engine层，实现真正的绘制逻辑（该层已经是框架底层实现，除非PR，否则接触不到）
从图可以看出Flutter框架有良好的分层设计，实际开发中只用关注上层框架，大大节省开发时间。该部分只需要对Flutter有个大致认识即可。
开发系统与工具选择
工欲善其事必先利其器。Flutter同时支持Windows和Mac OS，具体差别如下：
- Windows价格亲民，但是无法开发iOS
- Mac价格较高，能同时开发iOS和Android
经济条件允许的情况下推荐使用Mac进行开发。操作系统定下来后，还需要选择一款开发工具，这里直接推荐使用Andorid Studio，优点如下：
- Android开发利器；
- Google官方推荐的Flutter开发IDE；调试，开发支持最全。
环境搭建
由于Flutter会同时构建Android和IOS两个平台的发布包，所以Flutter同时依赖Android SDK和iOS SDK，在安装Flutter时也需要安装相应平台的构建工具和SDK。
/ Win下Flutter开发环境配置 /
由于Win下不支持iOS应用开发，所以Win下只需要配置好Android和Flutter的开发环境即可：
配置IDE
一共分为两个步骤：
- 安装Android Studio（Android Studio国内下载链接）；
- 为Android Studio安装Flutter和Dart插件。
首先通过上面链接进入官网进行下载，安装过程为下一步安装法，无脑下一步即可：
注意：Android开发需要配置JDK，但是Android Studio已经内置了JDK，所以额外安装JDK是可选的（如果需要安装，强烈建议安装JDK8.0，JDK11删除了一些Jar包，如果全局配置了JAVA_HOME，版本为11的情况下，可能导致Flutter运行出现一些不必要的错误）。
安装Flutter和Dart插件
打开Android Studio，打开File->Settings->Plugins，如下图所示
安装完成后，需要重新启动Android Studio。开发工具安装完毕后，需要配置Flutter开发环境。
Flutter开发环境的配置依赖以下工具：
- Windows Power Shell（win10内置，非win10可通过此链接进行下载）
- git（git for win下载地址）
设置镜像
由于国内访问Flutter可能会受到限制，Flutter官方为中国开发者搭建了临时镜像，大家可以将如下环境变量加入到系统环境变量中：
PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
win下具体配置步骤：右键我的电脑->选择属性->选择高级系统设置->选择环境变量，如下图所示：
- 点击高级系统设置
- 点击环境变量
- 新建系统变量
**
- 添加此变量
**
- 另一个变量也添加上
**
添加完毕后，记得全部点确定，方可生效。
设置Android SDK的环境变量
当我们安装完Android Studio后，Android SDK已经随着AS一起安装了，可以通过如下步骤查看Android SDK的路径：打开Android Studio->File->Setting，搜索SDK，点击后就可查看SDK的安装路径，如果没有也可以重新进行安装，如图所示：
和设置镜像的环境变量一样，设置如下变量到系统变量中：
ANDROID_HOME=${Andorid SDK路径}
如下图所示：
另外需要额外添加Andorid SDK模拟器路径以及工具路径到Path环境变量中：
配置完成后，重启电脑，然后打开cmd，输入adb，如果打印以下信息，说明Android的环境变量配置成功：
如果运行出错，请仔细核对Android SDK路径是否配置错误。
安装Flutter，配置Flutter环境变量
在Win下Flutter下载进行Flutter的安装，本文档使用的是1.9版本，更低版本不保证能稳定运行：
下载完成后，将安装包zip解压到你想安装Flutter SDK的路径，路径层级不要过深，也不要放在需要高用户权限的路径下，推荐放在系统盘根目录下。在Flutter安装目录的flutter文件下找到flutter_console.bat，双击运行并启动flutter命令行，接下来，你就可以在Flutter命令行运行flutter命令了。
每次通过启动文件来启动非常繁琐，可以吧flutter命令配置在系统环境变量Path下，如图：
配置完成后，重启电脑，在cmd中输入flutter，运行如下信息，则flutter环境变量配置成功：
以上就是Android和Flutter环境配置的全部内容，接下来创建第一个Flutter项目
通过Android Studio创建第一个Flutter项目
如图操作即可：
点击Finish后就创建了第一个Flutter项目。
Flutter不同版本的特点
Flutter SDK有多个分支，如beta、dev、master、stable，其中stable分支为稳定分支（日后有新的稳定版本发布后可能也会有新的稳定分支，如1.0.0），dev和master为开发分支，安装flutter后，你可以运行flutter channel查看所有分支，带"*"号的分支即你本地的Flutter SDK 跟踪的分支，要切换分支，可以使用flutter channel beta 或 flutter channel master，Flutter官方建议跟踪稳定分支，但你也可以跟踪master分支，这样可以查看最新的变化，但这样稳定性要低的多。
/ 个人介绍 /
Swift
四年软件开发经验，熟悉Objective-C/Swift/JavaScript/Java，对iOS开发有深入研究，目前从事前端和Flutter工作，欢迎QQ交流805433115。
/ 团队介绍 /
我们是一家以信息数据研发和互联网应用研发为主的互联网公司。我们的核心服务目标，是助力企业级主体使用互联网信息化模式改善企业效率和互联网上云方式企业全面数据化，并在小程序以及PC端应用开发和融媒体运营两个核心需求上，提供从策划、运营、开发、执行、反馈全部整体解决方案。
作者 / Swift
排版 / 大野鱼头
