Keynote

[ShannonChenCHN]

初识 Flutter

• 几个角度
  • 开发体验
  • 设计哲学
  • 实现原理
• Introduction（未知的未知和已知的未知）
  • hello world
  • SwiftUI vs. React Native vs. Native vs. Flutter
• 代码实战
  • hello_world
  • startup_namer
  • cupertino_store
• 原理、设计哲学
  • 基本原理
  • layout <-> flexbox
  • 状态管理、Redux
• 问题
  • 在真机上怎么跑？
  • Flutter 官方提供了两套 UI，我们如何做到一套代码两个平台？
  • 与 Native 的交互，与 Native 页面之间的数据传递
  • 几个实践难点
    • 命令式布局？
    • 吸顶效果
    • 代码复杂度管理

带一点自己的思考；聊一两个深入的点

[ShannonChenCHN]

Technical overview/Core principles

• Widget
  • Everything’s a widget (Unlike other frameworks that separate views, view controllers, layouts, and other properties, Flutter has a consistent, unified object model: the widget.)
    • a structural element (like a button or menu)
    • a stylistic element (like a font or color scheme)
    • an aspect of layout (like padding)
    • a gesture detector
    • and so on...
  • Composition > inheritance (Widgets are themselves often composed of many small, single-purpose widgets that combine to produce powerful effects.)
  • Layer cakes are delicious (The Flutter framework is organized into a series of layers, with each layer building upon the previous layer.)
• Building widgets
  • You define the unique characteristics of a widget by implementing a build() function.
  • A widget’s build function should be free of side effects.
  • Comparing the previous build with the current build and determining what UI modifications need to be made.
  • Simplifies your code by focusing on declaring what a widget is made of.
• Handling user interaction
  • A stateful widget: the unique characteristics of a widget need to change based on user interaction or other factors.
  • Stateful widgets subclass StatefulWidget (rather than StatelessWidget) and store their mutable state in a subclass of State.
  • call setState() --> mutate a State object
  • Having separate state and widget objects lets other widgets treat stateless and stateful widgets in the same way, without being concerned about losing state.

[ShannonChenCHN]

Introduction to widgets

Overview

• 核心思想借鉴了 React
• 所有的 UI 相关的(包括手势)都是通过 widget 来构建的
• UI 渲染过程
  • build() 方法中声明 UI 结构
  • 更新 state 时，build() 方法被调用
  • 通过和上一次 UI 结构的比较，来决定哪些是需要刷新的
  • widgets 只是用来描述 UI 的，真正绘制的 UI 是 RenderObject
• Widget 基类
  • StatefulWidget
  • StatelessWidget
• A widget is an immutable object that describes a specific part of a UI.

Basic widgets

• Text
• Row, Column（基于 web 开发里的 flexbox layout model 来设计的）
• Stack（基于 web 开发里的 absolute positioning layout model 来设计的）
  • Positioned
• Container（容器控件）
• Material app/Cupertino app/Plain app

Lifecycle events

• StatefulWidget
  • createState()
  • build()
• State<T extends StatefulWidget>
  • initState()
  • build()
  • didUpdateWidget()
  • dispose()
• StatelessWidget
  • Stateless widgets receive arguments from their parent widget, which they store in final member variables.

Why StatefulWidget and State are separate objects?

In Flutter, these two types of objects have different life cycles. Widgets are temporary objects, used to construct a presentation of the application in its current state. State objects, on the other hand, are persistent between calls to build(), allowing them to remember information.

In Flutter, change notifications flow “up” the widget hierarchy by way of callbacks, while current state flows “down” to the stateless widgets that do presentation. The common parent that redirects this flow is the State.

Handling gestures

Many widgets use a GestureDetector to provide optional callbacks for other widgets.

Key, GlobalKey

A Key is an identifier for Widgets, Elements and SemanticsNodes.

A new widget will only be used to update an existing element if its key is the same as the key of the current widget associated with the element.

A `GlobalKey is a key that is unique across the entire app.

参考

• Introduction to widgets
• Introduction to declarative UI

[ShannonChenCHN]

Layout

Key points

• UI is built in code, not (for example) in an XML file or similar.
• Widgets are classes used to build UIs.
• Widgets are used for both layout and UI elements.
• Compose simple widgets to build complex widgets.

Tip: To minimize the visual confusion that can result from heavily nested layout code, implement pieces of the UI in variables and functions.

Lay out a widget

• All layout widgets have either of the following:
  • A child property if they take a single child—for example, Center or Container
  • A children property if they take a list of widgets—for example, Row, Column, ListView, or Stack.

Lay out multiple widgets vertically and horizontally

• key points
  • Row and Column are two of the most commonly used layout patterns.
  • Row and Column each take a list of child widgets.
  • A child widget can itself be a Row, Column, or other complex widget.
  • You can specify how a Row or Column aligns its children, both vertically and horizontally.
  • You can stretch or constrain specific child widgets.
  • You can specify how child widgets use the Row’s or Column’s available space.
• Aligning widgets
  • mainAxisAlignment and crossAxisAlignment properties
• Sizing widgets
  • flex property
  • Expanded widget
  • Flexible widget
  • SizedBox widget
  • Spacer widget
• Packing widgets
  • mainAxisSize property
    • MainAxisSize.min
    • MainAxisSize.max

Common layout widgets

Any app can use the widgets library but only Material apps can use the Material Components library.

• Standard widgets
  • Container: Adds padding, margins, borders, background color, or other decorations to a widget.
  • GridView: Lays widgets out as a scrollable grid.
  • ListView: Lays widgets out as a scrollable list.
  • Stack: Overlaps a widget on top of another.
• Material widgets
  • Card: Organizes related info into a box with rounded corners and a drop shadow.
  • ListTile: Organizes up to 3 lines of text, and optional leading and trailing icons, into a row.

Constraints

• Golden Rule: Constraints go down. Sizes go up. Parent sets position.

  • A widget gets its own constraints from its parent. A constraint is just a set of 4 doubles: a minimum and maximum width, and a minimum and maximum height.
  • Then the widget goes through its own list of children. One by one, the widget tells its children what their constraints are (which can be different for each child), and then asks each child what size it wants to be.
  • Then, the widget positions its children (horizontally in the x axis, and vertically in the y axis), one by one.
  • And, finally, the widget tells its parent about its own size (within the original constraints, of course).

• Limitations

  • A widget can decide its own size only within the constraints given to it by its parent. This means a widget usually can’t have any size it wants.
  • A widget can’t know and doesn’t decide its own position in the screen, since it’s the widget’s parent who decides the position of the widget.
  • Since the parent’s size and position, in its turn, also depends on its own parent, it’s impossible to precisely define the size and position of any widget without taking into consideration the tree as a whole.

• Box constraints

  • Three kinds of boxes:
    • Those that try to be as big as possible. For example, the boxes used by Center and ListView.
    • Those that try to be the same size as their children. For example, the boxes used by Transform and Opacity.
    • Those that try to be a particular size. For example, the boxes used by Image and Text.
  • Unbounded constraints
  • Flex boxes (Row and Column)

• Tight vs. loose constraints

• Learning the layout rules for specific widgets

Creating responsive apps

• Use the LayoutBuilder class
• Use the MediaQuery.of() method in your build functions
• AspectRatio
• CustomSingleChildLayout
• CustomMultiChildLayout
• FittedBox
• FractionallySizedBox
• MediaQuery
• MediaQueryData
• OrientationBuilder

参考

• https://flutter.dev/docs/development/ui/layout
• https://flutter.dev/docs/development/ui/widgets/layout
• https://flutter.dev/docs/codelabs/layout-basics
• https://flutter.dev/docs/development/ui/layout/constraints
• https://flutter.dev/docs/development/ui/layout/box-constraints
• How to use LayoutBuilder widget in Flutter - InduceSmile
• How to Create Custom Layout Widgets in Flutter

[ShannonChenCHN]

DevTools

Overview

• Inspect the UI layout and state of a Flutter app.
• Diagnose UI jank performance issues in a Flutter app.
• CPU profiling for a Flutter or Dart app.
• Network profiling for a Flutter app.
• Source-level debugging of a Flutter or Dart app.
• Debug memory issues in a Flutter or Dart command-line app.
• View general log and diagnostics information about a running Flutter or Dart command-line app.

Flutter inspector

• Debugging layout issues visually
  • Select widget mode
  • Refresh tree
  • Slow Animations
  • Debug Paint
  • Paint Baselines
  • Repaint Rainbow
  • Debug Mode Banner
• Inspecting a widget
• Flutter Layout Explorer
  • Using the Layout Explorer
  • Interactive Properties
• Track widget creation

Timeline view

Memory view

Performance view

Network view

Debugger

Logging view

参考

• https://flutter.dev/docs/development/tools/devtools/inspector#debugging-layout-issues-visually

[ShannonChenCHN]

State management

Flutter is declarative. This means that Flutter builds its user interface to reflect the current state of your app:

Benefit: Remarkably, there is only one code path for any state of the UI. You describe what the UI should look like for any given state, once—and that is it.（所见即所得）

Key points

• State: “whatever data you need in order to rebuild your UI at any moment in time”.
• Lifting state up
  • keep the state above the widgets that use it
    • Why? In declarative frameworks like Flutter, if you want to change the UI, you have to rebuild it.
  • What does it mean when we say that widgets are immutable?
    • They don’t change—they get replaced.

Differentiate between ephemeral state and app state

• Ephemeral state
  • Definition: Ephemeral state (sometimes called UI state or local state) is the state you can neatly contain in a single widget.
  • Examples:
    • current page in a PageView
    • current progress of a complex animation
    • current selected tab in a BottomNavigationBar
• App state
  • Definition: State that is not ephemeral, that you want to share across many parts of your app, and that you want to keep between user sessions, is what we call application state (sometimes also called shared state).
  • Examples:
    • User preferences
    • Login info
    • Notifications in a social networking app
    • The shopping cart in an e-commerce app
    • Read/unread state of articles in a news app
• There is no clear-cut rule

When asked about React’s setState versus Redux’s store, the author of Redux, Dan Abramov, replied:

“The rule of thumb is: Do whatever is less awkward.”

List of state management approaches

• setState
• InheritedWidget & InheritedModel
• Provider & Scoped Model
• Redux
• BLoC / Rx
• MobX

参考

• Introduction to declarative UI
• https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro
• https://flutter.dev/docs/development/data-and-backend/state-mgmt/ephemeral-vs-app
• https://flutter.dev/docs/development/data-and-backend/state-mgmt/options