Understanding syntax of Stateless and Stateful widgets.
Published: 2021-06-19 19:38:38

{% tag flutter %} {% tag beginners %}

* 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](https://api.flutter.dev/flutter/widgets/State-class.html) 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.

![Difference](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/595sjylf2tuphvoh82e7.png)

* 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:
![Stateless Widget](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7pri6c0ibchb8g1bt2wa.png)

* 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:
![Normal Function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12ktfu0lgdt8ukeyy2ge.png)
* 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:
![Stateful Widget](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ouk6efc9f0mr7qz1d1za.png)

* 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. 

![State Widget](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfxzogh89syhzcpdz3mv.png)

* 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.