What is Flutter Composition
Flutter Composition is a process of combining multiple widgets or visual elements to create a user interface. In Flutter, composition is achieved by creating a hierarchy of widgets. Each widget creates it’s own constraints required to render it on the user interface. This is how we generate a widget tree. The widgets in the widget tree can contain be as simple as a Text & Row/Column or complex widgets such as a ListView or a GridView.
During composition, Flutter creates the constraint of each widget by determining the layout and size of the widget and evaluate the constraint of it’s parent widget. Once the layout constraint of the widgets are determined, they are painted onto the canvas which can be then displayed on the screen.
In the diagram you can see a small example for Composition. The widget tree contains the parent and child widget. During Composition, Flutter takes the child widget and position it inside the parent widget to create the final UI frame. To draw the child widget, constraints of child as well as parent widgets are used.
Once of the advantages of using Flutter is the ability of creating complex UIs from simple building blocks. This allows developers to generate custom widgets and combine them with existing widgets to create awesome UIs.
Overall, Composition is a Flutter feature which allows developers to create complex UIs with great user experience on mobile, web and desktop applications. You can read more about Composition on Flutter docs. We have also written some articles on some advance Flutter topics.
