Flutter 学习 - 开篇

什么是Flutter

Flutter是谷歌的移动UI框架，一款移动应用程序SDK，一份代码可以同时生成iOS和Android两个高性能、高保真的应用程序，也可以与现有的代码一起工作。Flutter的目标是使开发人员能够交付在不同平台上都感觉自然流畅的高性能应用程序，兼容滚动行为、排版、图标等方面的差异。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

为什么学习flutter

记得当初学习Java后面接触Android，有向Java方向和Android方向的机会，后面选择了Android，只是因为喜欢前端的开发，现在依然是抱着这个思想，无论是自学Html还是现在学习Flutter，都想与用户进行最直接的交互，想着一套代码能在多个平台上使用，想想都让人兴奋

Flutter的优势

提高开发效率

1.同一份代码开发IOS和Android

2.毫秒级的热重载，修改后应用界面会立即更新

创建美观，高度定制的用户体验

1.Flutter包含了许多核心的widget（Android：Material Design，IOS：Cupertino），如滚动、导航、图标和字体等，这些都可以在IOS和Android上达到原生应用一样的性能

2.分层的架构允许完全自定义，实现定制、美观、品牌驱动的设计，而不受原生控件的限制，从而实现难以置信的快速渲染和富有表现力灵活的设计

允许访问本地功能和SDK

Flutter允许您复用现有的Java、Swift或ObjC代码，访问iOS和Android上的原生系统功能和系统SDK,通过平台相关的API、第三方SDK和原生代码让您的应用变得强大易用

统一的应用开发体验

Flutter拥有丰富的工具和库，可以帮助您轻松地同时在iOS和Android系统中实现您的想法和创意。如果您没有任何移动端开发体验，Flutter是一种轻松快捷的方式来构建漂亮的移动应用程序。如果您是一位经验丰富的iOS或Android开发人员，则可以使用Flutter作为视图(View)层，并可以使用已经用Java / ObjC / Swift完成的部分（Flutter支持混合开发）。

核心原则

Flutter包括一个现代的响应式框架、一个2D渲染引擎、现成的widget和开发工具。这些组件可以帮助您快速地设计、构建、测试和调试应用程序。

一切皆为widget

Widget是Flutter应用程序用户界面的基本构建块，根据布局形成一个层次结构，每个widget嵌入其中，并继承其父项的属性

flutter_widget_层级.png

由上图可以看出widget的层次结构很浅且很宽，可以最大限度的增加可能的组合数量

Flutter框架是一个分层的结构，每个层都建立在前一层之上。

Flutter System overview .png

上图显示了框架的上层，它比下层的使用频率更高。有关构成Flutter分层框架的完整库，请参阅Flutter的API文档

构建widget

在Flutter中你所能看到的所有内容都是widget，我们通过实现widget的[build](https://docs.flutter.io/flutter/widgets/StatelessWidget/build.html)
返回widget层次结构来定义widget的独特特征。例如我们如果想要实现一个水平布局，会选择使用Row 类，其本身也是一个widget，然后向其children属性中依次添加widget，代码如下

Row(
  children: <Widget>[
    Expanded(
      child: Text('Deliver features faster', textAlign: TextAlign.center),
    ),
    Expanded(
      child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
    ),
    Expanded(
      child: FittedBox(
        fit: BoxFit.contain, // otherwise the logo will be tiny
        child: const FlutterLogo(),
      ),
    ),
  ],
)

每当widget被要求构建时，widget都会返回一个新的层次结构，不管之前是什么，Framwork层会将之前的和现在的做比较，确定需要对用户界面进行哪些修改，这种比较就比较有效，可以实现高性能对交互式应用程序，也就是我们能够及时看到自己所修改的部分。

处理用户交互

Flutter 中的widget包括两种，一种是StatefulWidget,另一种是StatelessWidget,区别在于一个状态可变，一个不可变。如果widget需要根据用户交互或其他因素进行更改，则该widget是有状态的，换句话说就是如果你的widget需要在某个时间有更新数据，则你的widget必须是StatefulWidget，如果你的widget在后续使用过程中不需要更改数据或者状态，则使用StatelessWidget。StatefulWidget的可变状态是存储在State的子类当中。如下图：

每当我们改变一个State对象时，我们需要调用setState()方法来通知框架，框架会再次调用State的构建方法来更新用户界面。

下面推荐几个网站

Flutter 中文网

Flutter 社区中文资源

后记：关于Flutter在实际项目中需要用到的技术和框架都会在我的开源项目中体现出来，目前已完成基本框架的搭建，ButtomNavigation + Pageview，后续还会有更多实用功能推出，感谢支持
项目地址：Flutter_Wheel