Understanding Flutter Stateless & Stateful widgets

In this article, we are going to learn the concept of Stateless & Stateful widgets and the difference between them. To Understand the basic widget that is used in a flutter, first of all, we should know what is a widget in a flutter.

In flutter, everything is a widget. In fact, the widget is a building block for our user interface. It is a blueprint for displaying our app state. The central purpose is to build the app out of widgets. Therefore, whenever we are going to design an app UI in Flutter, it will be inside a widget.

There are two types of widgets in a flutter.

The first one is the Stateless widget. As the name suggests Stateless widgets are widgets that don’t change their state, they are immutable. Their appearance and properties remain unchanged throughout the lifetime of the widget. Icon, IconButtons, and Text widgets are examples of the stateless widget.

Below is an example of Stateless widgets.

import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Stateless Title"),
          leading:  IconButton(onPressed: () {}, icon: const Icon(Icons.arrow_back)),),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
    children: const [
              Text("Stateless Widget Body"),
              SizedBox(height: 20.0,),
              Icon(Icons.add_photo_alternate_rounded),
            ],
          ),
        ),
      ),
    );
  }
}

Another one is Stateful widgets, Stateful widgets are the widgets that can change their state during the app lifecycle. Stateful widgets are “Mutable” widgets. To create a Stateful widget ”createState()” method is used.

Below is an example of Stateful widgets.

void main() {
  runApp(const StateFulDemo());
}

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

  @override
  State<StateFulDemo> createState() => _StateFulDemoState();
}

class _StateFulDemoState extends State<StateFulDemo> {
  bool isChecked = false;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Stateful Demo"),
        ),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Checkbox(
                value: isChecked,
                onChanged: (value) {
                  setState(() {
                    isChecked = !isChecked;
                  });
                },
              ),
              isChecked ? const Text("Checked") : const Text("Unchecked")
            ],
          ),
        ),
      ),
    );
  }
}

We use setState() method to change the State of the Widget. Here the Text widget is Stateless,

So it can’t be changed, But we can change it with the Text widget with different properties using the setState() method because the Text widgets’ parent widget is a Stateful widget.