一、概述

Flutter实战

二、一切都是Widget

在Flutter架构中，一切都是组件。
1、所有的页面View、按钮Button、列表List、手势Gesture(按钮点击、双击、缩放等)都是以组件的方式提供；
2、iOS/Android中的页面布局，也是组件方式支持，提供布局组件(如Flex、线性布局、位置布局等） 和 容器布局（Margin、Pading、裁剪、变换等），包裹子组件从而实现页面的自定义布局。

2.1、组件

无状态 StatelessWidget、有状态 StatefulWidget、状态 State。

• 一个 StatefulWidget 至少包含 StatelessWidget 和 State 类。

• 为什么要将build方法放在State中，而不是放在StatefulWidget中？
  这主要是为了提高开发的灵活性。
  如果将build()方法放在StatefulWidget中则会有两个问题：1、状态访问不便。2、继承StatefulWidget不便。

2.2、路由（管理页面的跳转）

无论是Android还是iOS，导航管理都会维护一个路由栈，路由入栈(push)操作对应打开一个新页面，路由出栈(pop)操作对应页面关闭操作，而路由管理主要是指如何来管理路由栈。

• MaterialPageRoute -> PageRoute
  PageRoute类是一个抽象类，表示占有整个屏幕空间的一个模态路由页面，它还定义了路由构建及切换时过渡动画的相关接口及属性。
  MaterialPageRoute 是Material组件库提供的组件，它可以针对不同平台，实现与平台页面切换动画风格一致的路由切换动画。

MaterialPageRoute({
    WidgetBuilder builder,  // 一个WidgetBuilder类型的回调函数，它的作用是构建路由页面的具体内容，返回值是一个widget。
    RouteSettings settings, //配置信息，如路由名称、是否初始路由
    bool maintainState = true, // 是否常驻内存，默认true
    bool fullscreenDialog = false, // 是否全屏模式
  })

• Navigator
  一个路由管理的组件，它提供了打开和退出路由页方法。Navigator通过一个栈来管理活动路由集合。
  Future push(BuildContext context, Route route)
bool pop(BuildContext context, [ result ])

2.3、路由传值

• 非命名传递
  Navigator.pop(context, "参数")
  通过等待Navigator.push(…)返回的Future来获取新路由的返回数据，使用async / await 机制。

• “命名路由”（Named Route）即有名字的路由
  1、注册路由表（routing table）：Map<String, WidgetBuilder> routes;
  2、跳转：Future pushNamed(BuildContext context, String routeName,{Object arguments})
  3、获取参数：var args=ModalRoute.of(context).settings.arguments;

• 路由生成钩子
  MaterialApp有一个onGenerateRoute属性，它在打开命名路由时可能会被调用，之所以说可能，是因为当调用Navigator.pushNamed(...)打开命名路由时，如果指定的路由名在路由表中已注册，则会调用路由表中的builder函数来生成路由组件；如果路由表中没有注册，才会调用onGenerateRoute来生成路由。
  注意，onGenerateRoute只会对命名路由生效。

三、包管理

管理第三方依赖包pubspec.yaml。

• YAML是一种直观、可读性高并且容易被人类阅读的文件格式，它和xml或Json相比，它语法简单并非常容易解析，所以YAML常用于配置文件，Flutter也是用yaml文件作为其配置文件。
• Pub（https://pub.dev/ ） 是Google官方的Dart Packages仓库，类似于node中的npm仓库，android中的jcenter。

四、资源管理

1、Assets

Assets是会打包到程序安装包中的，可在运行时访问。常见类型的assets包括静态数据（例如JSON文件）、配置文件、图标和图片（JPEG，WebP，GIF，动画WebP / GIF，PNG，BMP和WBMP）等。

每个asset都通过相对于pubspec.yaml文件所在的文件系统路径来标识自身的路径。在构建期间，Flutter将asset放置到称为 asset bundle 的特殊存档中，应用程序可以在运行时读取它们（但不能修改）。

Asset 变体（variant）

“asset变体”的概念：不同版本的asset可能会显示在不同的上下文中。

加载 assets

您的应用可以通过 AssetBundle 对象访问其asset 。

有两种主要方法允许从Asset bundle中加载字符串或图片（二进制）文件。

加载图片

注意：声明分辨率相关的图片 assets
AssetImage可以将asset的请求逻辑映射到最接近当前设备像素比例（dpi）的asset。为了使这种映射起作用，必须根据特定的目录结构来保存asset：

…/image.png
…/Mx/image.png
…/Nx/image.png
…etc.
其中M和N是数字标识符，对应于其中包含的图像的分辨率，也就是说，它们指定不同设备像素比例的图片。

例如：

…/my_icon.png
…/2.0x/my_icon.png
…/3.0x/my_icon.png

• AssetImage，非widget对象
  `new AssetImage('graphics/background.png')

• Image，widget对象
  Image.asset('graphics/background.png');

注意：使用默认的 asset bundle 加载资源时，内部会自动处理分辨率等，这些处理对开发者来说是无感知的。

• 其他底层加载类： ImageStream 或 ImageCache

2、依赖包中的资源图片

要加载依赖包中的图像，必须给AssetImage提供package参数。
注意：包在使用本身的资源时也应该加上package参数来获取。

new AssetImage('icons/heart.png', package: 'my_icons')
// 或
new Image.asset('icons/heart.png', package: 'my_icons')

image.png

3、特定平台 assets

主要包括以下两类，需要到各自平台工程下设置。

• 应用图标
• 启动默认图

---

三、调试

flutter analyze(静态代码检查)
Dart Observatory (语句级的单步调试和分析器)