CODEWITHSUNDEEP
flutter
Ted Henry
Ted Henry

Reputation: 1492

Flutter widget rendering design name?

I’m enjoying learning about Flutter. When data changes, a whole tree of widgets is rebuilt. Then Flutter compares the new tree with the old tree and updates the UI as necessary. What is this general style of programming called?

It reminds me of some things I saw about Haskel years ago and pure functional programming. Instead of modifying an existing database, create a whole new database and let the persistence layer figure out how to store it efficiently.

This is totally different from MVC where the programmer is responsible to know which parts of the UI need to be updated. With MVC it’s necessary to know how to first build the UI and also know how to update it. With Flutter we only need to know the first part, building the UI, it seems.

Upvotes: 2

Views: 463

Answers (1)

Marcel
Marcel

Reputation: 9579

This feature is a mixture of multiple paradigms, especially declarative, but also reactive and functional programming.

Declarative programming means that you don't need to worry about how things change. Rather, you just describe how they should look, given some data. Then, the framework figures out what to change. That's pretty much the paradigm you described in your question.

Functional programming refers to a deterministic relationship between the input you give to a widget constructor and the "output" of the widget's build method. That describes almost the same thing as declarative programming but focuses on the relationship between the input and output rather than style in general. StatelessWidgets fit this paradigm pretty well.

Reactive programming refers to the pattern that changes to the widgets' constructors ripple down into lower-level widgets and events bubble back up. It focuses more on how nested widgets interact with each other.

Here's an excerpt from the Flutter FAQ. On the site, they also describe several other paradigms Flutter uses.

Flutter is a multi-paradigm programming environment. Many programming techniques developed over the past few decades are used in Flutter. We use each one where we believe the strengths of the technique make it particularly well-suited. In no particular order:

Declarative programming

The build methods of widgets are often a single expression with multiple levels of nested constructors, written using a strictly declarative subset of Dart. Such nested expressions could be mechanically transformed to or from any suitably expressive markup language. For example, the UserAccountsDrawerHeader widget has a long build method (20+ lines), consisting of a single nested expression. This can also be combined with the imperative style to build UIs that would be harder to describe in a pure-declarative approach.

Reactive programming

The widget and element trees are sometimes described as reactive, because new inputs provided in a widget’s constructor are immediately propagated as changes to lower-level widgets by the widget’s build method, and changes made in the lower widgets (for example, in response to user input) propagate back up the tree via event handlers. Aspects of both functional-reactive and imperative-reactive are present in the framework, depending on the needs of the widgets. Widgets with build methods that consist of just an expression describing how the widget reacts to changes in its configuration are functional reactive widgets (for example, the Material Divider class). Widgets whose build methods construct a list of children over several statements, describing how the widget reacts to changes in its configuration, are imperative reactive widgets (for example, the Chip class).

Functional programming

Entire applications can be built with only StatelessWidgets, which are essentially functions that describe how arguments map to other functions, bottoming out in primitives that compute layouts or paint graphics. (Such applications can’t easily have state, so are typically non-interactive.) For example, the Icon widget is essentially a function that maps its arguments (color, icon, size) into layout primitives. Additionally, heavy use is made of immutable data structures, including the entire Widget class hierarchy as well as numerous supporting classes such as Rect and TextStyle. On a smaller scale, Dart’s Iterable API, which makes heavy use of the functional style (map, reduce, where, etc), is frequently used to process lists of values in the framework.

Upvotes: 2

Related Questions