Types of Widgets

Types of Widgets

There are broadly two types of widgets based on the state of the Widget itself-

• Stateless Widgets
• Stateful Widgets

The names are self-explanatory!

What is Stateless Widget?

Stateless Widgets are simple Widgets which do not change their state, i.e., their state is constant. Do not confuse "stateless" to mean "having no state at all". Stateless Widgets have a state, but it does not change. To create one, we need:

• A name for the new class
• To extend our class from StatelessWidget.
• Implement the build() method, that will receive one argument of type BuildContext and return a result of type Widget.

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

How the Stateless Widget works:

When you are building a mobile application, it is important to understand that there are instances where the state of the mobile application should change and cases where it shouldn’t.

A simple example of a stateless widget is when you work on a calculator app, the layout/structure of the UI doesn’t change, i.e., the columns and rows remain the same. However, when a user inputs a number/figure in the text field, it requires a change in the original state, thus making it a stateful widget and the opposite of a stateless widget.

For example, the kitchen state always tends to change, unlike the museum state, where people can’t move things around.##

In a kitchen, you will need to move utensils, spices, foodstuff, and equipment around. But, in a museum, you can’t move/touch things because these things are meant to be at a specific spot/state at all times (except, of course, if the management wants it to be treated otherwise).

So, the interactions people make in a museum can’t change the state of things, except of course if it’s a shifting operation.

Click here to read more about creating Stateless Widgets.

What is Stateful Widget?

Stateful Widgets are dynamic widgets. They can be updated during runtime based on user action or data change.State-full Widgets are sensitive to what happens within its boundaries and gets rebuilt when a state change is detected. Conversely, Stateless widgets are not state sensitive and remain static throughout its life cycle.

import 'package:flutter/material.dart';

class MyApp extends StatefulWidget {
  const MyApp({ Key? key }) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

Here we have declared our main class called MyApp which extends the StatefulWidget class. That means now we have to define the generic method called createState() in that class which will return one another class which extends the generic class State.

How the stateful Widget works:

The name of the Stateful Widget is MyApp which is called from the runApp() and extends a stateful widget. In the MyApp class, we override the create state function. This createState() function is used to create a mutable state for this widget at a given location in the tree. This method returns an instance for the respected state subclass. The other class which is _MyAppState extends the state, which manages all the changes in the widget. Inside this class, the build function is overridden which takes the BuildContext as the parameter. This build function returns a widget where we design the UI of the app. Since it is a stateful widget the build function is called many times which creates the entire UI once again with all the changes.

Click here to read more about creating Stateless Widgets.

What is the difference between Stateless and Stateful widgets:

Stateless Widget:

• Stateless Widgets are static widgets.
• They do not depend on any data change or any behavior change.
• Stateless Widgets do not have a state, they will be rendered once and will not update themselves, but will only be updated when external data changes.
• Example: Text, Icon, RaisedButton are Stateless Widgets.

Stateful Widget:

• Stateful Widgets are dynamic widgets.
• They can be updated during runtime based on user action or data change.
• Stateful Widgets have an internal state and can re-render if the input data changes or if Widget’s state changes.
• Example: Checkbox, Radio Button, Slider are Stateful Widgets

Further reading, Important widgets