如何制做 Flutter 应用？只需四步，轻松上手！

Flutter彻底免费、开源,在全世界，Flutter正在被愈来愈多的开发者和组织使用。

不要犹豫，一块儿来走进Flutter的世界吧

1. Flutter 是什么？

Flutter 是 Google 开源的 UI 工具包，帮助开发者经过一套代码库高效构建多平台精美应用，支持移动、Web ([early access][])、桌面和嵌入式平台。

Flutter 旨在帮助开发者创做媲美原生的高性能应用，并听从了各个平台不一样的滚动行为、排版布局、图标样式等。这是一个名为 Gallery 的示例应用， Gallery 是一个在安装完 Flutter 并配置好环境后能够当即运行的 Flutter 示例应用集合。

Shrine 有高质量的滚动图片、交互式卡片、按钮、下拉列表以及一个购物车页面。开始开发以前无需移动开发经验。应用使用 Dart 开发，若是你曾使用过 Java 或者 JavaScript 语言，那么 Dart 看上去会很熟悉。

面向对象编程的经验对开发毫无疑问会有帮助，但即使不是程序员也能够制做 Flutter 应用！

2. 为何使用 Flutter？

Flutter 的优点是什么？它可以帮你：

高效率

• 在应用运行时尝试修改代码并重载（经过热重载）
• 修复崩溃并从应用中止的地方开始继续调试
• 利用单一代码库开发 iOS 与 Android 应用
• 即使在单一操做系统上，也能够经过使用现代、富有表现力的语言以及声明式方法，写更少代码作更多事
• 原型与轻松迭代

生成美观、高度定制化的用户体验

• 受益于用 Flutter 框架构建的丰富的 Material Design 以及 Cupertino （iOS 风格） widget
• 实现定制、美观、品牌驱动的设计，不受 OEM widget 集合的限制

3. 核心原则

Flutter 包含一个现代响应式框架，一个 2D 渲染引擎，现成的 widget 以及开发工具。这些组件协同工做以帮助你设计、构建、测试和调试应用。全部这一切都围绕几个核心原则进行组织。

3.1 一切皆 Widget**

Widget 是 Flutter 应用用户界面的基本构建单元，每一个 widget 都与最终的用户界面的展现紧密相关。不一样于其余框架和平台 —— 将视图 (views)、视图控制器 (view controllers)、布局 (layouts) 等其余属性分开， Flutter 拥有统一的对象模型：widget。一个 widget 能够定义：

• 一个结构元素（好比一个按钮或者菜单）
• 一个风格元素（好比一个字体或者配色方案）
• 布局的一个方面（好比 padding）
• 等等……

Widget 经过组合造成一个层次结构，每一个 widget 嵌套其中，从其父节点继承属性。Flutter 中没有单独的“application”对象，与之相对应的功能由 root widgets 承担。

你能够经过告诉框架将层次结构中的一个 widget 替换为另外一个来响应事件，如用户交互。框架将会对比新旧 widget 并及时更新用户界面。

3.1.1 组合大于继承

Widgets 自己每每是由许多小的、具备单一用途的 widget 组成，它们组合在一块儿能够产生强大的效果。好比，Container 是一个经常使用的 widget，由负责布局、绘制、定位和尺寸的几个 widget 组成。

具体来讲，Container 是由 LimitedBox、ConstrainedBox、Align、Padding、 DecoratedBox 和 Transform widgets 组成的。

你能够将这些与其它小而简单的 widgets 用新颖的方式组合，而不是子类化 Container 以生成自定义效果。类层次结构是浅而广的，以支持尽量多的组合。

你也能够经过组合其它 widgets 以达到控制一个 widget 的布局。例如，为了居中一个 widget，你能够把它包裹在一个 Center widget 中。还有用于设置间距、对齐、行、列以及网格的 widgets，这些布局 widgets 自己并无视觉表现。

反之，他们惟一的目的是在某些方面上控制另外一个 widget 的布局。要了解一个 widget 以某种方式呈现的缘由，查看其邻近 widgets 一般颇有帮助。

3.1.2 层次蛋糕很是美味

Flutter 框架由一系列层结构组成，每一层都创建在前一层之上。

框架上层会比下层使用的更频繁。

这样作的目的是为了帮助你用更少的代码完成更多工做。
例如，经过在 widgets 层组合基础 widgets 来构建 Material 层，而 widgets 层自己则是经过对来自 Rendering 层的低层次对象组合而来。这些层次为构建应用程序提供了许多选项。选择一种自定义方法来释放框架的所有表现力，或使用 widgets 层中的构建块，或混合搭配。

你能够组合 Flutter 提供的现成 widgets 或使用 Flutter 团队在构建框架时所使用的相同工具和技术来构建你的自定义 widgets。没有任何内容能够逃离你的视线，所以能够在生产力上从高级别、统一的 widget 概念中获益，且不会牺牲你想深刻更底层时的能力。

3.2 构建 widget

能够经过完善 build() 函数来定义一个 widget 拥有的特性，该函数返回一个 widget 树（或者层次结构）。该树经过更具体的方式来表示用户界面上的 widget 部分。

例如，一个 toolbar widget 可能会有一个返回一些 水平布局 文本 和 各类 按钮 的构建函数。

框架会递归地去构建这些 widget 直到达到最底层 彻底具象的 widgets，而后将它们拼接成一棵树。一个 widget 的构建函数应该没有反作用。

不论什么时候调用，widget 总应该返回一颗新的 widgets 树，不论其以前返回了什么。框架会将先前构建与当前构建仔细进行比较，并肯定须要对用户界面作哪些修改。

这种自动比较很是有效，可实现高性能的交互式应用。构建函数在设计上经过专一声明 widget 的构成，而不是处理更新用户界面状态的复杂性，来达到简化代码的目的。

3.3 处理用户交互

若是一个 widget 的特性须要根据用户交互或其余因素改变，那么这个 widget 是有状态的。例如，若是一个 widget 包含一个随用户点击按钮而递增的计数器，则计数器的值即是 widget 的状态。

当该值更改时，则须要从新构建 widget 以更新 UI。这些 widget 继承自 StatefulWidget（而不是 StatelessWidget）并将它们可变的状态存储在 State 的一个子类中。

不论什么时候你操做一个 State 对象（例如，递增计数器），你必须调用 setState() 方法来通知框架经过从新调用 State 的构建函数，以此达到更新用户界面的目的。

有关状态管理的示例，能够查看随着任何一个新 Flutter 项目生成的 MyApp 模版。将状态与 widgets 对象分开可让其余 widgets 以相同的方式处理无状态和有状态的 widget，而不用担忧丢失状态。不一样于经过维持一个子节点来保留状态，父节点能够自由地建立子节点实例，而不会丢失子节点的持久状态。框架会在适当的时候作完查找和重用现有状态对象的全部工做。

4. 试试！

既然你已熟悉 Flutter 框架的基本结构和原理，及如何构建应用并使其具备交互性，那么你已准备好开始开发与迭代了。

（1）试试看 Flutter 布局基础教程 (无须下载 Flutter 或 Dart)

（2）安装 Flutter SDK （ Linux、Windows 和 macOS ）

（3）查看 Flutter 使用教程(cookbook)

• 连接：https://flutter.cn/docs/cookbook

（4）尝试一些 Flutter 样例

• 连接：https://github.com/flutter/samples/blob/master/INDEX.md

（5）试试看上手一些 Flutter codelabs

连接：https://flutter.cn/docs/codelabs

（6）试试看这些 Flutter 教程

• 连接：https://flutter.cn/docs/reference/tutorials

（7）看看 Widgets 介绍文档

（8）看看这些 Flutter 技术视频

**入门到进阶实战学习视频，关注我，私信【flutter】领取**

最后

BATJ、字节跳动面试专题，算法专题，高端技术专题，混合开发专题，java面试专题，Android,Java小知识，到性能优化.线程.View.OpenCV.NDK等已经上传到了的个人GitHub

你们点击个人GitHub地址:https://github.com/Meng997998/AndroidJX点下star一块儿学习