ericltw / notes

0 stars 1 forks source link

Technical overview in Flutter #9

Open ericltw opened 5 years ago

ericltw commented 5 years ago

What is Flutter?

Flutter is a mobile app SDK for building hight-performance, hight-fidelity, apps for iOS and Android, from a single codebase.

The goal is to enable developers to deliver high-performance apps that feel natural on different platforms. We embrace different in scrolling behaviors, typography, icons and more.

Why use Flutter?

Core principles

Everything is a widget

Widgets are the basic building blocks of a Flutter app's user interface. Each widget is an immutable declaration of part of the user interface. Unlike other frameworks that separate views, view controllers, layouts, and other properties, Flutter has a consistent, unified object model: the widget.

A widget can define:

Widget form a hierarchy based on composition. Each widget nests inside, and inherits properties from, its parent. There is no separate "application" object. Instead, the root widget serves this role.

You can respond to events, like user interaction, by telling the framework to replace a widget in the hierarchy with another widget. The framework then compares the new and old widgets and efficiency updates the user interface.

Composition > inheritance

Widget are themselves often composed of many small, single-purpose widgets that combine to produce powerful effects. For example, Container , a commonly-used widget, is made up of several widgets responsible for layout, painting, positioning and sizing. Specifically, Container is made up of LimitedBox, ConstrainedBox, Align, Padding, DecoratedBox, and Transform widgets. Rather than subclassing Container to produce a customized effect, you can compose these, and other, simple widgets in novel ways.

The class hierarchy is shallow and board to maximize the possible number of combinations.

You can also control the layout of a widget by composing it with other widgets. For example, to center a widget, you wrap it in a Center Widget. There are widgets for padding, alignment, row, columns, and grids. These layout widgets do not have a visual representation of their own. Instead, their sole purpose is to control some aspect of another widget's layout.

Layer

The Flutter framework is organization into a series of layers, with each layer building the previous layer.

The goal of this design is to help you do more with less code. For example, the Material layer is built by composing basic widgets form the widgets layer, and the widgets layer itself is built by orchestrating lower-level objects form the rendering layer.

The layers offer many options for building apps. Choose a customized approach to unlock the full expensive power of the framework, or using building blocks from the widgets layer, or mix and match.

Building widgets

You can define the unique characteristics of a widget by implementing a build function that returns a tree (or hierarchy) of widgets.

A widget's build function should be free of side effects. Whenever it is asked to build, the widget should return a new tree of widgets regardless of what the widget previously returned. The framework does the heavily lifting of comparing the previous build with the current build and determining what modifications need to be made to the user interface.

This automated comparison is quite effective, enabling high-performance, interactive apps. And the design of the build function simplifies your code by focusing on declaring what a widget is made of, rather than the complexities of updating the user interface from one state to another.

Handling user interaction

If the unique characteristics of widget need to change based on user interaction or other factors, that widget is stateful. For example, if a widget has a counter that increments whenever the user taps a button, the value of the counter is the state for that widget. When that value changes, the widget needs to be rebuilt to update the UI.

These widgets subclass StatefulWidget (rather than StatelessWidget) and store their mutable state in a subclass of State.

diagram-state

Whenever you mutate a State object, you must call setState() to signal the framework to update the user interface by calling the State's build method again.

Having separate state and widget objects let other widgets treat stateless and stateful widgets in the same way, without being concerned about losing state. Rather than needing to hold on to a child to preserve its state, the parent is free to create a new instance of the child without losing the child's persistent state.

Reference

ericltw commented 4 years ago

what is Flutter

Flutter is a way to write for iOS and Android from a single codebase. And we try to make that fast and easy.

ericltw commented 4 years ago

https://www.youtube.com/watch?v=h7HOt3Jb1Ts