非常精美丰富的组件库 • 支持移动、Web、桌面和嵌入式平台 • UI统一、高性能 Flutter简介 Dart语言简介 - 变量声明 Dart语言简介 - 函数声明 Dart语言简介 - 函数声明 Dart语言简介 - 类声明 上手试试？ Flutter基础 • 组件 • 路由 • 资源管理 • 包管理 Flutter组件 • 基础组件 • 布局组件 • 容器组件 • • 功能类组件 基础组件 • StatelessWidget & StatefulWidget • Text • Button • Image • Switch & Checkbox • TextField 布局组件 • 线性布局（Row和Column） • 弹性布局（Flex） • 流式布局（Wrap、Flow） • 层叠布局（Stack） • 对齐与相对定位（Align） 对齐与相对定位（Align） 容器组件 • 填充（Padding） • 尺寸限制（ConstrainedBox、SizedBox、） • 移除子组件限制（UnconstrainedBox） • 装饰容器（DecoratedBox） • 变换（Transform） • 容器（Container） • 框架（Scaffold、TabBar、BottomNavigationBar） • 剪裁（Clip） 容器组件

Elements ● 定义自己的标签(名字中要包含 - ) ● 纽带，封装其它元素和属性、行为、JS代码 ● 创建新的 HTML 元素，扩展 HTML 的语义 ● 扩展现存的 DOM 对象 ● 组件复用的单元 ● 让标签更有意义 大量底层标签可读性差 自定义元素可读性好 One Two 数据绑定就是自动化实现这种单向绑定或双向绑 定 组件是新技术？ 当然不是！思想和各种实现早就有，Web中也 有，但 Web 缺少对组件技术的基础支撑。——我 ● 组件技术适合于现代的软件环境 ○ 软件更新快、规模大、强调协作等 ○ 组件的概念、软件IC ● 组件的可独立发布性要求“接口与实现分离” ● 组件infrastructure,组件体系 ○ COM、CORBA、J2EE/EJB 基础之上的 Web 库，为 Web 平台上浏览器的演 进提供支持。 ● 包含一组 polyfill 的库 ● 以 Web Components 为核心 ● 使用更方便的 API ● 丰富的UI组件（开发中） http://www.polymer-project.org/ HTML5的很多功能并不是所有浏览器都支持。为了解决跨浏 览器兼容性问题，Remy Sharp首次提到了ployfilling的概念。

强类型，可以类型推断 提升开发效率！ 经过简单统计，写同⼀一个功能， 使⽤用Dart，可以减少50%的代码量量 强⼤大的异步编程能⼒力力 全栈语⾔言 UI Widget 所有UI元素都是widget组件 Stateless Widget Stateful Widget 状态 功能 Visual Layout Painting Intera ction Platform 代码写UI 组合Widget

现有业务框架的问题与挑战 数据和UI一致性较差 数据本身的变化可控性较差 模块内和模块间代码风格不一致 响应式 tieba_redux 现代 redux Redux的优势与问题 组织代码 n 组件:函数式，class n 数据:props，state n 纯函数 组织思想 n State变化可预期 n 面向action序列编程 n 松耦合调用方式 n 生态成熟，适用复杂场景 n 带有编码规范的框架

Alpha Beta Preview1 Preview2 闲⻥鱼 - 让你的闲置游起来 接近Native效果的UI和交互体验 多图列列表 评论盖楼 图⽂文 闲⻥鱼 - 让你的闲置游起来 Native组件 Native和Flutter混合开发 混合栈 闲⻥鱼 - 让你的闲置游起来 视频和动画 视频 动画 闲⻥鱼 - 让你的闲置游起来 关键问题解决 混合开发：⼯工程管理理和混合栈管理理