Flutter's Reactive Framework

About Flutter's framework

Flutter is Google's mobile UI framework that is used by developers and organisations, and is free and open source. It also includes modern reactive framework and 2D rendering engine. With flutter's modern reactive framework, a view is built as an immutable tree of widgets. Flutter is reactive, pseudo-declarative UI framework, in which developer provides a mapping from application state to UI state, and the framework takes care of rendering and re-rending the UI at runtime based on the application state. Developers only create the UI description, and the framework takes on creating or updating the UI as appropriate

Widgets

Widgets are the foundation of our apps. They are the description of the part of the user interface. Indeed, everything in flutter is a widget. They are represented by immutable classes that are used to configure a tree. A widget declares its user interface by overriding the build() method, which is a function that builds UI. When a widget changes its state, such as due to animations or user input, the widgets rebuilds itself according to the new state, because UI is defined as the function of state.

UI = f(state)

Flutter Rendering Engine

As mentioned above, Flutter also includes 2D rendering engine. This rendering engine is built in Skia, a 2D graphics engine library and Dart. It displays widgets both for iOS and android devices. The android and iOS platforms just have to provide the canvas for us to place the widgets and the rendering engine inside. We don't need to bridge the UI rendering engine to the native platform.

flutter_layers.png

When flutter needs to render the widget, it calls the build() method, which returns the subtree of widgets that render the UI based on the current state of an app. During the build phase, flutter translates the widgets expressed in code into a corresponding element tree, with one element for every widget. Because widgets are immutable, including the parent/child relationship between nodes, any change to any node of the widget tree, causes returning a new set of widget tree.