What Are Widgets?
Widgets are user interface components within a Flutter application. You may think that you write code that renders the widget on the screen but you dont.
When you write the code for a widget, you don't write the code that directly renders it. You write the configuration for the rendering of the widget in the 'build' method of the widget. In that method you create and return a widget object that configures what you want rendered on the screen. Flutter itself takes care of the rendering itself, as well as other things like change detection.
Build Method
This is where you write code that configures how the widget will look and of what widgets it may be composed of. Widgets can contain other widgets, some built-in to the Flutter toolkit, others custom-built by yourself.
Example
A simple widget that displays a car's make, model and image.
@override
Widget build(BuildContext context) {
return Center(
child: Column(children: [
Text(make),
Text(model),
Image.network(imageSrc)
]));
}
Note that there is no code to draw anything. The only thing you see is that the build method returns a widget. This widget is a Center widget that contains a child Column widget that contains three child Widgets: two text Widgets and an Image widget. So the widget returned is a tree of widgets, a widget tree, a hierarchy of widgets.
Now when you look at the widget then the widget tree you notice something. There are five elements in the widget tree but you only see three widgets visually. Thats because there are visual and non-visual widgets.
Visual & Non Visual Widgets
Some widgets are visual (you see them) and some are not.
Some widgets are used to control other widgets, configure their layout. There are a couple of them in the example:
- The 'Center' widget is used to center its child widget. See how things are centered?
- The 'Column' widget is used to vertically stack its child widgets. See how the two texts and the image are stacked on top of each other?
BuildContext
If you look at the example code you will see that the first argument to the build’ method of your Widget is the BuildContext. This gives your ‘build’ method information about the location of your Widget in the Widget Tree. It may not seem useful at the moment but will come in very handy later on!
Not All Widgets Are Equal
Ok, we know that a Flutter user interface is composed of Widgets and that each widget has a build method that gives Flutter configuration information on how render it. That’s true for all widgets.
We also know that some Widgets can be composed of other widgets, for example a Form widget being composed of text and input boxes.
However, in addition to that, some widgets are simple (stateless), others are more dynamic (stateful). These dynamic stateful Widgets can react to things happening, like data (state) changing.
State Terminology
Before we talk about stateless and stateful widgets, we need to get our terminology straight. State is simply information about something held in memory.
- In the context of an application, the state is the data (information) it uses.
- In the context of a widget (part of the UI) the state is the data (information) contained in the widget.
Mutable State
Mutable state is state that can be changed.
Immutable State
Immutable state is state that cannot be changed.
Flutter Widgets & State
Flutter has two types of Widgets: StatelessWidgets and StatefulWidgets. Both types of Flutter Widgets can store data that doesn’t change (immutable state). Only one can appear to be able to store data that changes (mutable state)
Stateless Widgets
Stateless Widgets can store data that doesn’t change.
- They are the most-commonly used Widgets.
- They are typically used to do simple things like ‘display customer name’.
- They don’t update their data (state).
- They don’t update their UI when their data changes (they dont rebuild themselves).
- >They are very lightweight and are created and thrown away very often, rather than change.
- For example, if you have a Customer Name Stateless Widget and the customer name changes then a new Widget is created for the new name, it replaces the old one and the old one is thrown away.
Stateful Widgets
Not used as often as stateless widgets. These widgets are often composed of many stateless widgets.
Their UI Can Update When State Changes
Stateful Widgets appear to be able to store data that changes (mutable state) and update their UI when that data changes. For example, you would expect a stateful text input widget to store the data for the actual text displayed therein and that can change.
They Don’t Actually Store the State Themselves
Internally Stateful Widgets are only associated with a separate State object, which stores data that can change (mutable state). When the State needs to change (the user did something and an event occurred), the code invokes the ‘setState’ method in the State object and the Stateful Widget is re-rendered (the ‘build’ method is invoked to update the UI).
Event Handling
Widgets have event handlers. These are essential so that the UI reacts to the actions of the user.
Anyway this is enough for this article, we will be going into more details on widgets very soon, this was just the very basics!