1、Flutter诞生的原因
跨平台工具包历来采用以下两种方法之一：
将 Web 视图包装在本机应用程序中，并将应用程序构建为网页。
包装原生平台控件并提供对它们的一些跨平台抽象。
Flutter 采取不同的方法，试图使移动开发更好。 它提供了一个开发人员使用的应用程序框架和一个可移植的运行时引擎。该框架建立在 Skia 图形库上，提供实际呈现的部件，而不仅仅是原生控件的包装。
Flutter 做跨平台开发能够像 web 一样灵活，但同时提供流畅的性能。
Flutter 附带的部件库以及开源部件使其成为一个功能丰富的平台。简单地说，Flutter 是最接近移动开发人员用于跨平台开发的理想平台，灵活性、性能几乎毫无妥协。
Flutter 使用谷歌开发的 Dart 语言进行开发。 Dart 是一种面向对象的语言，同时支持提前编译和即时编译，非常适合用于构建本地应用程序，同时 Flutter 的热加载有效的提高了开发效率。 Flutter 最近也转向了 Dart 2.0 版本。
Dart 提供了许多其他语言中的功能，包括垃圾回收，异步，强类型，泛型以及丰富的标准库。
2、跨平台框架的发展史1、使用WebApp的一些框架1、Ruby on Rails
2、AngularJS
3、JQuery Mobile
4、Cordova
5、PWA
6、Instant App
优势：
一套HTML5APP 即可同时适用iOS、Android平台，适配性和体验较好。
版本服务器更新，用户永远看到的是最新APP端的信息。
技术难度较低，开发工作量小，开发成本低。
劣势：
用户体验大幅落后于原生APP，操作的流畅度，程序的执行效率，与原生APP都有较大差距；
HTML5 APP 受网速的影响较大，在网络情况较差的情况下，HTML5 APP 往往连打开都困难，而原生程序，基本都能顺利打开运行（只是速度较慢）。
2、 适合移动端App的一些框架1、React Native
特点：Facebook 出品的一个移动端开发框架，可以最大限度的接近原生框架，就能够在Javascript和React的基础上获得完全一致的开发体验，构建原生App，仅需学习一次，编写任何平台。（Learn once， write anywhere）
缺点：初次学习成本高，必须不同平台写两套代码，依赖暴露的接口
2、Weex
特点：weex 能够完美兼顾性能与动态性，让移动开发者通过简捷的前端语法写出Native级别的性能体验，并支持iOS、Android、YunOS及web等多端部署。
缺点：控件太少，基本只能实现最基本的效果；上手难度打，如果是前段和移动端都懂的话上手很快；随着项目变大，编译速度会呈指数型上升。
3、Flutter
1、免费开源；
2、利用保持状态的热重载（hot reload）、全新的响应式框架、丰富的控件以及集成的开发工具，这些特点进行快速开发；
3、通过可组合的控件集合、丰富的动画库以及可扩展的框架来实现富有感染力的灵活界面设计；
4、借助可移植的GPU加速的渲染引擎以及高性能本地ARM代码运行时以达到跨设备的高品质用户体验；
5、提高开发效率：使用一套代码同时开发iOS和Android；
6、可扩展性强：Flutter框架本身提供了丰富的Material Design和Cupertino(iOS-flavor)风格的控件，可自由扩展控件，不受手机平台控件的限制。
Flutter框架Flutter框架是一个分层的结构，每个层都建立在前一层之上。
image.png
Flutter跨平台最核心的部分，是它的高性能渲染引擎（Flutter Engine）。Flutter不使用浏览器技术，也不使用Native的原生控件，它使用自己的渲染引擎来绘制widget。
说到widget，就要说一句Flutter的一切皆为widget理念。widget是Flutter应用程序用户界面的基本构建块。每个widget都是用户界面一部分的不可变声明。与其他将视图、控制器、布局和其他属性分离的框架不同，Flutter具有一致的统一对象模型：widget。在更新widget的时候，框架能够更加的高效。
对于Android平台，Flutter引擎的C/C++代码是由NDK编译，在iOS平台，则是由LLVM编译，两个平台的Dart代码都是AOT编译为本地代码，Flutter应用程序使用本机指令集运行。Flutter正是是通过使用相同的渲染器、框架和一组widget，来同时构建iOS和Android应用，而无需维护两套独立的代码库。
image.png
Flutter将UI组件和渲染器从平台移动到应用程序中，这使得它们可以自定义和可扩展。Flutter唯一要求系统提供的是canvas，以便定制的UI组件可以出现在设备的屏幕上。
Flutter安装 -- #官网链接>>> --**
image.png
image.png
image.png
image.png
3、开发工具Flutter 在开发工具的选择上很灵活。 应用程序可以通过命令行以及任何编辑器轻松开发，这些编辑器来自受支持的 IDE，如 VS Code，Android Studio 或 IntelliJ。 使用哪种 IDE 取决于用户的偏好。
Android Studio 提供了最多的功能，例如 Flutter Inspector 来分析正在运行的应用程序的窗口部件以及监视应用程序性能。 还提供了开发部件层次结构时很方便的几个重构。
VS Code 提供了更轻松的开发体验，因此它的启动速度往往比 Android Studio / IntelliJ 更快。 每个 IDE 都提供内置的编辑助手，如代码补全，接口定义跳转以及良好的调试支持。
Flutter 也很好的支持命令行，这使得创建，更新和启动应用程序变得容易，除了编辑器之外没有任何其他工具依赖性。
4、热加载无论采用何种工具，Flutter 都能为应用程序的热加载提供出色的支持。 这允许在许多情况下修改正在运行的应用程序，维护状态，而不必停止应用程序，重新构建和重新部署。
5、测试Flutter 包含一个 WidgetTester 实用程序，用于与测试中的部件进行交互。 新的应用程序模板包含一个示例测试，用于演示在创建测试时如何使用它。
6、包管理和插件 pub链接Flutter 已经有了一个丰富的开发者生态系统：开发人员已有大量可以使用的包和插件。
要添加包或插件，只需在应用程序的根目录下的 pubspec.yaml 文件中包含依赖项即可。 然后从命令行或 IDE 运行 flutter packages get，Flutter 的工具将引入所有必需的依赖关系。
要将流行的图像选择器插件用于 Flutter，只需在 pubspec.yaml 中将其列为依赖项
然后运行 flutter packages get 拉取所有依耐项，然后可以在 Dart 中导入和使用它
image.png
6、部件Flutter 里的所有东西都是一个一个的部件。 这包括用户界面元素，例如 ListView，TextBox 和 Image，以及框架的其他部分，包括布局，动画，手势识别和主题等。
通过将所有内容都设置为窗口部件，整个应用程序可以在窗口部件层次结构中表示。 拥有一个所有内容都是部件的架构，可以清楚地了解作用于某一部分的属性和行为的来源。 这与大多数其他应用程序框架不同，它们将属性和行为不一致地关联起来，有时将属性和行为从层次结构中的其他组件附加到控件本身，有时自身控制属性和行为。
7、运行第一个Flutter应用
image.png
image.png
部件示例Flutter 应用程序的入口点是 main 函数。 要在屏幕上放置用户界面元素的部件，在 main（）中调用 runApp（）并将部件层次结构根部的部件作为参数传递。
image.png
无状态 VS 有状态部件有两种形式：无状态和有状态。 无状态部件在创建和初始化后不会更改它们的内容，而有状态部件维护一些程序运行时可变的状态，例如，响应用户交互。
image.png
在实例中无状态的Widget继承自StatelessWidget，其初始化之后，不会更改内部内容。
有状态的Widget继承自StatefulWidge,有状态的部件返回一个负责为给定状态构建部件树的 State 类。 状态更改时，将重建窗口部件树的关联部分。通过setState（）方法改变部件状态。状态在传递给 setState（）的函数中更新。 当调用 setState（）时，该函数可以设置任何内部状态。
|
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
淘帖
顶
踩
