Understanding syntax of Stateless and Stateful widgets.

#flutter

An open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.

#beginners

"A journey of a thousand miles begins with a single step." -Chinese Proverb

In a Flutter app, everything is a widget. The whole app is a widget tree formed by combining widgets like Scaffold, Container, AppBar, and many more.
But 2 core widgets are controlling the state of widgets. They are Stateless Widget and Stateful Widget.
So what are these widgets? Let's understand it first before diving straight into the syntax.
Stateless Widgets are those widgets whose state cannot be changed. They are immutable. This explains that if you want to change the color of a container on tap then it's not possible with Stateless Widget. But it can have UI widgets such as Text and icon widgets.
Stateful Widgets on the other hand are the opposite of what we saw previously. Here, not only color but any property or value can be changed of a widget by calling setState method on onTap property. Thus, it's mutable.

As Flutter extensions in your code editor allow you to directly create a Stateless/Stateful Widget, we cannot get the idea of what exactly does the block of code does. So let's understand it.

Stateless Widget:

So the code starts with extending a class called StatelessWidget. Extending means that we are creating a class (Child Class) that will inherit all the methods and properties of StatelessWidget (Parent Class). In this case the class we defined as is MyApp.

Note:- StatelessWidget is a class created by material package by flutter. The package we import in every flutter app package:flutter/material.dart gives us the functionality of the StatelessWidget class.

Before going on to the next step let's understand that:
-> Functions inside a class are called methods and Variables inside a class are called properties of that class.
So now we have a method inside our MyApp class extended from StatelessWidget class.
Let's take an example of a function to clear it out:
Here, we have a function main of type void as it has no return type. It can also accept arguments/parameters. And finally the block of code inside it.
Similarly, we have a function of name build of type Widget as everything is a widget in flutter. Then we have a parameter context of datatype BuildContext.

Note:- It is not mandatory to use context word. we can also use ctx or cntxt. It depends on the person. And whenever we pass an argument or a parameter in a function/method then we need to state its datatype. For e.g, int age, String name.

Here, the build method is called by flutter whenever it needs to render something on the screen. context is an object holding information about our widget and where it is in the widget tree. BuildContext is a type notation for context which is a class provided by flutter.
And lastly the return type. As the method is not a void type, but a Widget type it should return something. In this case, it returns the MaterialApp widget. This widget is also provided by the flutter and it combines our widget tree and renders it to our fully-fledged app.

Stateful Widget:

As we can see there are 2 classes in this case. MyApp and MyAppState. One extends StatefulWidget and other extends State. Similar to StatelessWidget, these two classes are created by flutter itself.
Now, why we have 2 classes? It's because whenever the state of any widget changes, only the main class (MyApp) rebuilds, and another one (MyAppState) remains persistent.
For better understanding, remember MyApp class as widget class and MyAppState class as state class.
Also, State is a generic type class. Generic typed classes are those classes that function in the limit to the datatype mentioned. Here, we give it type MyApp so we can tell flutter that State class is a sub-class of MyApp and will work under it.
This was the first step to connect both the classes. Now we need to implement createState method inside our widget class.

Above image explains how we implemented State class in MyApp class to connect them.
It accepts no parameter but has a type State which is the same class provided by flutter. As it is a generic type class, it accepts StatefulWidget class as its datatype. It returns the child class we created which extends State class, i.e MyAppState class.

Note:- The main difference between these 2 classes is that the data which is inside State class does not change on rebuilding our app. Only the widget changes according to its state. So as mentioned above, Widget class rebuilds not State class.

And to the end, we can see @override keyword in both Stateless as well as Stateful widgets. But what is it?
What it does is that it tells flutter that we are using a method of the superclass and we intend to do use that method deliberately.