Flutter Widget

Flutter Widget tutorial and Examples

In this tutorial we explore at the fundamental, probably the most important class in Flutter, the Widget class.

What is Widget?

Widget is an abstract class for Flutter that describes the configuration for an Element.

A widget is an immutable description of part of a user interface.

Widget derives from the DiagnosticableTree class

abstract class Widget extends DiagnosticableTree

and is defined in the flutter package.

Widgets are very important to the way Flutter Framework works and is the central class hierarchy in Flutter.

You can inflate Widgets into elements. Those elements then become responsible for the management of the underlying render tree.

Widgets themselves have no mutable state (all their fields must be final).

However you can associate a mutable state with a widget. In that case you can use the StatefulWidget class, which will then create a State object via StatefulWidget.createState whenever it is inflated into an element and incorporated into the tree.

You can inlude a widget in the tree zero or more times. In particular a given widget can be placed in the tree multiple times.

Each time a widget is placed in the tree, it is inflated into an Element, which means a widget that is incorporated into the tree multiple times will be inflated multiple times.

The key property controls how one widget replaces another widget in the tree. If the runtimeType and key properties of the two widgets are operator==, respectively, then the new widget replaces the old widget by updating the underlying element (i.e., by calling Element.update with the new widget).

Otherwise, the old element is removed from the tree, the new widget is inflated into an element, and the new element is inserted into the tree.

Widget API Definition

Let’s look at the API definition of the Widget class.

Here’s the inheritance hierarchy:

   ↳    Diagnosticable
       ↳    DiagnosticableTree
           ↳    Widget

Here’s its constructor. This initializes key for subclasses.

Widget({Key key })

A widget has a property key that controls how one widget replaces another widget in the tree.

5 Classes That implement the Widget Class

Here are the 5 implementers of Widget class:

1. StatelessWidget : a widget that does not require mutable state.

2. StatefulWidget : A widget that has mutable state.

3. RenderObjectWidget : A widget that provides the configuration for RenderObjectElements, which wrap RenderObjects, which provide the actual rendering of the application.

4. ProxyWidget : A widget that has a child widget provided to it, instead of building a new widget.

5. PreferredSizeWidget : An interface for widgets that can return the size this widget would prefer if it were otherwise unconstrained.



Share an Example

Share an Example

What is the capital of Egypt? ( Cairo )