Flutter入门

Flutter实战电子书
Flutter中文网
备注：最近在琢磨学习Flutter，主要是参考学习上面资料，首先表示大神辛苦整理表示感谢，下面多是参考上面总结类似于笔记，便于后续参考。

1. 原生开发和跨平台开发对比

• 原生开发的优点：
      * 原生系统控件渲染ui样式，性能高，动画流畅，滑动手势等比较好处理，整体用户体验好。
      * 系统提供了全部功能访问的api，可以直接访问，比如摄像头，定位等功能
• 原生开发缺点：
      * 开发成本高，每一个平台都是专有系统和api开发都需要专业人员开发，多平台涉及到的产品测试资源也多，提升了整个产品的研发成本
      * 版本更新周期长，一版功能由研发到测试再到发布上线审核通过跨的周期比较长，已不太适合当前移动互联网快速发展和功能快速迭代更新。
• 相对比跨平台开发则是将原生优缺点颠倒过来，多数功能跨平台，原生平台更多是支撑作用，节省开发成本，跨平台多数支持热更新，无需发版，提升版本迭代功能，同样缺点就是不能直接访问系统某些功能，渲染也不是原生控件直接渲染导致用户体验很差。

2. 当前跨屏技术实现及其对比

• 当前跨平台开发技术下面三种：原生+h5(js)，原生控件+js，自研UI引擎+原生三种，下面是大神整理的三种的区别，直接复用：

  
  跨平台技术对比
• 多数项目中使用最多的是第一种实现，第二种实现以fc的react native框架居多，第一种更多的也是webview渲染页面，js和native通信，虽有框架好像用的也不多，当前主要是介绍第三种（个人对rn研究也不深），所以前两种就不深入介绍，有兴趣可以找其他文档或者上面参考文章。

3. Flutter特性

• flutter样式层实现不依赖与原生系统控件，自研2d样式绘制引擎skia，跨平台而且高性能
• flutter是基于dart开发语言研发的，dart语言具有多种研发模式：静态编译（java）和动态编译（js），开发阶段可以动态编译解释方式提升测试，发包可以使用静态编译方式在运行时比着js这样边解释边执行语言更快执行，具体如下：
      如上开发效率高
      高性能
      快速分配内存
      类型安全
      开发文档及其问题平台齐全，有助于开发学习
      针对dart语言，刚入门，上面都是大神文章总结的，后续学习过程中比对。

4. Flutter框架层级结构

   
   flutter框架层级

• 如图所示，可以将其层级看做三层：底层的具体实现引擎，中层的底层实现封装，上层的对外研发封装，项目开发也多是使用上层的框架封装等。

5. Flutter环境搭建

• 环境搭建主要是mac+Androidstudio，其他参考大神文章。
• 安装flutter
      * 去flutter sdk 官网下载对应包，并解压到对应的安装文件夹。
      * 配置path路径，将flutter安装包中的bin等配置到mac系统path文件中。类Android java配置，方便命令行和ide使用
      * 命令行校验是否安装成功
• Androidstudio配置
      * 安装对应的flutter插件和dart插件
      * 类Android工程创建，注意点：是否支持ios和kotilin都是创建过程中的可选项。
• 备注mac配置path命令的方法
      * 命令行：open .bash_profile 打开命令行文件
      * 在文件中按照先前的配置配置好对应的命令
      * source 。bash_profile 保存命令行文件

6. 第一个Flutter app

• 按照上面步骤可以很方便的Android studio中创建出flutter工程，功能层级如下：

  
  flutter工程层级结构
• Android studio确实是很强大的一个ide，大大简化了ndk和flutter的开发流程，提升了开发效率。
• 如图所示，只是简单标识一下层级结构，存个印象，后续会根据深入学习更进一步深入flutter工程的每一个层级。