Stateless vs Stateful Widget Flutter (Class 28)

Stateless vs Stateful Widget in Flutter 

Flutter is based on widgets so it is important to know the Stateless vs Stateful Widget concept in it. We must know the difference and how to make screens using them. We make a User Interface (UI) with widgets. If we set our goal to learn 2-3 widgets daily, it is easy to complete the task of learning 100 widgets in a month or so. After learning widgets, it becomes easy for us to complete any task in Flutter.

What are widgets?

In simple words, everything in Flutter is a widget. A screen is made with the help of multiple widgets like images, text, etc. We can call them widgets, components, part of UI, or sections. In the previous classes, we have seen basic widgets like text, buttons, etc. Now we will discuss its types.

Types of Widgets

There are two types of widgets in Flutter:

Stateless widgets

Stateful widgets

Stateless widgets

Widgets without any state are called stateless widgets. The state of a widget does not change in this type of widget. A full screen can also be a stateless widget or static. For example, if a screen remains the same in an app and does not change like the opening screen then it is built with a Stateless widget for sure.

Stateful widget

Widgets with state are called Stateful widgets. It is the opposite form of stateless widgets as the widget’s state changes. We need to use dynamic content in our app and while making Stateful widgets we can do this. In short, we will mostly use Stateful widgets in our work.

Is Stateless or Stateful Better?

It depends upon our work but stateful is mostly used instead of stateless as we can use it dynamically.

What is the lifecycle of Stateless Widget?

It is very easy to make a stateless widget. First of all, it is built outside our main function. We will type stl and its suggestions will appear. After that, while pressing enter we can create it. After creating it, we will give the class name. Now to run we will create runApp in main function and then we will call its class name as we do in functions. For example, we give the class name MyStatelessWidget to it then we will call it by the same name. Let’s see the example:

import 'package:flutter/material.dart';
void main(){
  MyStatelessWidget();
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

Where to write code in a Stateless widget?

In previous classes, we wrote our code in the main function. Unlike that, in a stateless widget, we will write it in the Stateless widget’s build function. It is to be noted that we are changing the position, the rest work of the widgets will remain the same as we learned earlier. We can make an app bar, body, etc in it. For this purpose, we will remove const Placeholder(); and after return, we can start from any widget.

How to make a Login Screen using a Stateless Widget

It is very simple. We can make a login screen in stateless widgets using widgets we have learned earlier including Material App, Scaffold, App Bar, Text widgets, and Buttons as under:-

import 'package:flutter/material.dart';

void main() {
  runApp(MyStatelessWidget());
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Stateless Widget"),
        ),
        body: Material(
          child: Center(
            child: ElevatedButton(
              onPressed: () {},
              child: Text("Login"),
            ),
          ),
        ),
      ),
    );
  }
}

Task: Make a login screen using stateless widget in Flutlab

Widget wrapping

Putting a widget in another widget is called widget wrapping. We can do it manually but the shortcut way is to come in that widget. Press Alt+enter and then click wrap with the widget. The benefit of widget wrapping is, we get the option of manipulating it like padding of a widget, etc.

We will learn how to make a form using widgets and practical Stateful widgets in coming classes In Sha Allah. Stay Tuned !!