Welcome to the widget class

Creating flutter UI can be demanding. But you’re in luck, you have your greatest helper, the Widget class, here to help you!

In the world of flutter UI, everything is a widget. Widget is the primary building block of the Flutter UI. Widget is an immutable description of part of a user interface, which means all their fields must be final. By themselves, widgets have no mutable state.

What are stateless and stateful widgets?

A stateful widget is a widget that has a mutable state associated with it. Associating a mutable state to a widget like this gives the app interactivity and responsiveness. Without stateful widgets, we wouldn’t be able to do something like this in the images below:

Here, we can change the border of the card and replace the text in it with a nice checkmark, pointing out that the card is selected.

On the one hand, stateless widgets don’t have a state associated with them. This means that when a stateless widget is built, it cannot be changed unless we create a whole new instance of that widget. On the other hand, stateful widgets can be rebuilt any number of times, just call setState, and in the body of setState put the code that affects the UI.

Stateless widgets when created look like this:

<code class="language-dart">
 class StatelessExample extends StatelessWidget {
                @override
                Widget build(BuildContext context) {
                               return Text("This is a stateless widget");
                }
 } 
</code>

… While stateful widgets look like this:

<code class="language-dart">
 class StatefulExample extends StatefulWidget {
                @override
                State createState() => _StatefulExampleState();
 }
  
 class _StatefulExampleState extends State&#60;StatefulExample&#62; {
                @override
                Widget build(BuildContext context) {
                               return Text("This is a stateful widget");
                }
 }
</code>

For example, if we wanted to implement the Selected functionality shown in the images above, we would need to have a variable in our stateful widget, _isSelected.

All that is left is for us to call setState in the onPressed method of the widget surrounding the card body (in this example, the surrounding widget is InkWell, but it can be done with GestureDetector):

<code class="language-dart">
 onPressed: () {
                setState((){
                               _isSelected= true;           
                });
 }
</code>

The other option is to do something in the lines of this:

<code class="language-dart">
 onPressed: () {
                _isSelected = true;          
                setState((){
                });
 }
</code>

I have to mention that the first way is better because it tells you exactly what’s going on and what you are changing when calling the rebuild method, setState. With that in mind, it should be used only to wrap the actual changes to the state, not any computation that might be associated with the change.

Flutter UI hierarchy and setState

Flutter’s UI hierarchy is based on a widget tree. Every time we create a new instance of a widget, it is added to the widget tree as a child of the widget from which it was instantiated. Because of this, calling setState can sometimes be really costly. When we call setState, it does call the build method of the widget, but it rebuilds the whole subtree beneath that widget. In other words, it calls the build method of all of its children, too. If the subtree beneath it is deep, that setState can end up being costly. That is why it’s good practice to always keep the whole widget tree relatively shallow, so you don’t have to worry about costly rebuilds.

To sum things up…

… If the main idea you got out of this article is that stateless widgets are used to create UI that does not depend on the input of the user and that stateful widgets are used for creating dynamic UI, you can give yourself a pat on the back! You did well and made the first step to understanding how flutter works!