Photo by Tim Bennett on Unsplash

Everything in flutter is widget

This is the statement your going to here or have been hearing ever since you started learning flutter and so did I, and thats absolutely correct statement. Flutter app are literally made up of differnt widgets weaved togather to give user a smooth exprience. And since they are everywhere it is important to have basics clear about what widgets are, and here is my viewpoint

In short, widget is component that describes the view to be shown on the screen(not always), it can describe properties like colours, size, background etc. Note the word not always since widgets can also be created as a placeholder that describes the positioning of its child widget.

In flutter there are two types of widgets StatefulWidget and StatelessWidget. StatefulWidget are the widget that contains a state and updates themselves whenever state changes, where as StatelessWidget does not contains any state state and therefore doesn't update itself once its displayed to the user unless asked by its parent widget.

Stateless Widget

This is the basic widget that is used for displaying data, it do contains its own data, but its mostly provided by some other widget also known as parent widget , but this data is final, which means that once initialised it cannot be change or altered, only way to change it is to reinitialise the widget again. example of stateless widget can be a Text shown on screen which is doesn't change itself over the lifetime of screen shown on device

MyWidget class extends from another class StatelessWidget which marks our Widget as StatelessWidget, only requirement of this class it that you must implement the build method, which tells flutter how to draw your widget on screen and how to repond to user touches or how to animate the widget.

In above I have created simple widget that displays a text in the centre of the the screen, this widget is built with the help of other widgets that improves the visual of my widget, for example DecorateBox allows me to decorate my widget by giving it colour , where as Centre places the Text widget at the centre of MyWidget.

here is output of the code

As you can see this widget is nothing but multiple widgets (DecorationBox, Center, Text) weaved together to create one widget which becomes the root widget

Notice that the root widget occupies the entire screen even though we have not specified any dimension for it, this is because flutter by default forces the root widget to occupy entire screen

Stateful Widget

Now lets have a look at StatefulWidget, only difference between the a StatefulWidget and StatelessWidget is that StatefulWidget got state. State is variable declared in the widget that governs how the widget is drawn on screen. Though this is the only different , the way we create a StatefulWidget is quite different, we need to create two classed instead of one. Here the code;

As you can see in above code there are two classes one that extends from StatefulWidget class and other that extends State which is a generic class which mean you need to pass the type of the class whose state you are building, in our case its MyWidget. This state class in instantiated and returned by the createState of the StatefulWidget class. Each State class must have its own widget and vice versa, also since the state class must not be access on its own it is good practice to make it as private. Also the build method is now part of the State class and not of Widget class that's because in stateful widget, state of the widget is responsible to tell tell flutter how the widget should be drawn on the screen.

You can see above the variable background declared in our state class of type Color which in turn is used as background for DecoratedBox. Since this variable determine how the widget is drawn on screen this variable becomes the State of the Widget. Further more I have added a gesture detection on the entire widget that changes the background colour whenever user taps widget based on what the current colour is. However changing state variable is not enough, we need to inform flutter that our widget state is changed and widget it need to be redrawn on the screen. We do that by enclosing out state change inside a block of code or we can all it special function called setState(() {}), which is a function that take another function as parameter which accepts no arguments and contains the code that updates widget state, this block forces flutter to redraw the screen.

Below is output of above code

Don’t use setState(( ){ }) this block of code to do stuff that doen’t changes any UI related things on screen.

MyWidget output in both states

Notice that the state variable here is in our State class , but thats not always the case you can define the state variable in widget class as well especially when values for then is provided by parent widget, this variables can be access using a variable provided by State class called widget this depicts how tightly the state class is coupled to its widget class.

Thats it all about a widget, as simple as I could make it, hope this helped you to understand the widgets and how to create a simple widget of your own.There are tons of widget already provided to you by flutter, make sure you have a glance at them so that you don’t end up creating the widget that is already available to you.

Thanks for the read!!!

Swift Engineer, Full of dreams