What is a Widget actually?

A widgets a building block for your user interface. Using widgets is like combining Legos. Like Legos, you can mix and match widgets to create something amazing.

Flutter’s declarative nature makes it super easy to build a UI with widgets. A widget is a blueprint for displaying your app state.

You can think of widgets as a function of UI. Given a state, the build() method of a widget constructs the widget UI.

Widget Tree

Note: it does not matter if you cannot remember how Card2 was made it’s the concept that matters.

Every widget contains a build() method. In this method, you create a UI composition by nesting widgets within other widgets. This forms a tree-like data structure. Each widget can contain other widgets, commonly called children. Below is a visualization of Card2’s widget tree:

You can also break down AuthorCard and Expanded:

The widget tree provides a blueprint that describes how you want to lay out your UI. The framework traverses the nodes in the tree and calls each build() method to compose your entire UI.