Flutter Widget

| Page Views: 166

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.

Best Regards.


How do You Feel after reading this?

According to scientists, we humans have 8 primary innate emotions: joy, acceptance, fear, surprise, sadness, disgust, anger, and anticipation. Feel free to tell us how you feel about this article using these emotes or via the comment section.

About Me.

After completing his Software Engineering bachelors program, Oclemy(Clement Ochieng) these days is a man of two lives. At day he works for a startup in Nairobi, Kenya. At night he works tirelessly on building ProgrammingWizards TV, a tv channel for student coders and this website to help share the source code. In between he practices Meditation and Self actualization to help him keep balance. He also likes going for long solo walks to connect more with nature.


What do You Think

Previous Post Next Post