Flutter - Stateful vs Stateless Widgets

The state of an app can very simply be defined as anything that exists in the memory of the app while the app is running. This includes all the widgets that maintain the UI of the app including the buttons, text fonts, icons, animations, etc. So now that we know what are these states let's dive directly into our main topic i.e. what are these stateful and stateless widgets and how do they differ from one another.

What is a State?

The State is the information that can be read synchronously when the widget is built and might change during the lifetime of the widget.  

In other words, the state of the widget is the data of the objects that its properties (parameters) are sustaining at the time of its creation (when the widget is painted on the screen). The state can also change when it is used for example when a CheckBox widget is clicked a check appears on the box.

Flutter Stateless Widgets

• The widgets whose state can not be altered once they are built are called stateless widgets.
• These widgets are immutable once they are built i.e. any amount of change in the variables, icons, buttons, or retrieving data can not change the state of the app.

Below is the basic structure of a stateless widget. Stateless widget overrides the build() method and returns a widget. For example, we use Text or the Icon in our Flutter application where the state of the widget does not change in the runtime. It is used when the UI depends on the information within the object itself. Other examples can be Text, ElevatedButton, IconButtons.

Example of Stateless Widgets

main.dart:

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 Container();
  }
}

So let us see what this small code snippet tells us. The name of the stateless widget is MyApp which is being called from the runApp() and extends a stateless widget. Inside this MyApp a build function is overridden and takes BuildContext as a parameter. This BuildContext is unique to each and every widget as it is used to locate the widget inside the widget tree.

Note: The widgets of a Flutter application are displayed in the form of a Widget Tree where we connect the parent and child widgets to show a relationship between them which then combines to form the state of your app.

The build function contains a container which is again a widget of Flutter inside which we will design the UI of the app.  In the stateless widget, the build function is called only once which makes the UI of the screen.

Example: Stateless Widget

main.dart:

import 'package:flutter/material.dart';

// Main function to run the app
void main() => runApp(const MyApp());

// MyApp is a stateless widget
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // Build method to create the widget tree
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        
      // Disable debug banner
      debugShowCheckedModeBanner: false, 
      home: Scaffold(
        appBar: AppBar(
          leading: const Icon(
            Icons.menu,
            
            // Icon color
            color: Colors.white, 
          ), 
          
          // Menu icon on the left
          
          // Green background color for AppBar
          backgroundColor: Colors.green, 
          title: const Text(
            
            // Title text
            "GeeksforGeeks", 
            
            // Text style
            style: TextStyle(color: Colors.white), 
          ),
        ), // AppBar
        body: const Center(
          child: Text(
              
            // Center text
            "Stateless Widget",
            
            // Text style
            style: TextStyle(color: Colors.black, fontSize: 30), 
          ),
        ), // Center
      ), // Scaffold
    ); // MaterialApp
  }
}

Output:

Flutter Stateful Widgets

• The widgets whose state can be altered once they are built are called stateful Widgets.
• These states are mutable and can be changed multiple times in their lifetime.
• This simply means the state of an app can change multiple times with different sets of variables, inputs, data.

Below is the basic structure of a stateful widget. Stateful widget overrides the createState() method and returns a State. It is used when the UI can change dynamically. Some examples can be CheckBox, RadioButton, Form, TextField.

Classes that inherit "Stateful Widget" are immutable. But the State is mutable which changes in the runtime when the user interacts with it.

Example:

main.dart:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  // ignore: library_private_types_in_public_api
  _MyAppState createState() => _MyAppState();
}

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

So let us see what we have in this code snippet. 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.

Example: Stateful Widget

This is a simple counter app , which can increase the number in the center dynamically, when the user taps on the FloatingActionButton.

main.dart:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

// MyApp is the root widget of the application
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}

// HomePage is the main screen of the app
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

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

class _HomePageState extends State<HomePage> {
  // Variable to store the counter value
  int _counter = 0; 

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: const Icon(
          Icons.menu,
          color: Colors.white,
        ), // Set the leading icon
        
        // Set the background color of the app bar
        backgroundColor: Colors.green,
        
        // Set the title of the app bar
        title: const Text(
          "GeeksforGeeks",
          style: TextStyle(
            
            // Set the text color
            color: Colors.white, 
          ),
        ),
      ),
      
      // The main body of the scaffold
      body: Center(
        
        // Display a centered text widget
        child: Text(
          "$_counter",
          
          // Apply text styling
          style: const TextStyle(
            
            // Set font size
            fontSize: 24, 
            
            // Set font weight
            fontWeight: FontWeight.bold, 
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.green,
        onPressed: () {
          // Increment the counter value by 1 using setState
          setState(() {
            _counter++;
          });
        },
        child: const Icon(
          Icons.add,
          color: Colors.white,
        ),
      ),
    );
  }
}

Output:

Stateless widget is useful when the part of the user interface you are describing does not depend on anything other than the configuration information and the BuildContext whereas a Stateful widget is useful when the part of the user interface you are describing can change dynamically.