State Management Basics

Learn about the importance of state management and stateful widgets.

We'll cover the following

Importance of state management

This section will address two questions. First, why is state management necessary in Flutter? And second, what is a Flutter state?

The state is the information that a user can view synchronously when a widget is changed. During the lifetime of the widget, it can hold that data.

Even if we refresh or render the widget, the data stays.

There are different types of approaches to manage a state. This lesson deals with the most basic approach. Moreover, in this lesson, we will see how a widget can manage the state and render it.

To begin with, a state is an object. Therefore, it is not a widget. Although in Flutter, everything is a widget. Therefore, we can say that a stateful widget is immutable, just like a stateless widget. The state object associated with the stateful widget is mutable and manages the State of the widget.

We’ll see how a widget can manage its state.

There are a few steps that we need to do before we proceed.

First, we’ll create a class, OwnStateManagingWidget, and then manage its state.

Second, we’ll define the _stateChanged boolean, to determine the box’s current color.

Third, we’ll define the _changeState() function, which updates _stateChanged when the box is tapped and calls the setState() function to update the UI.

In the end, we’ll implement all interactive behavior for the widget.

Changing the widget state

We’ve already defined the _stateChanged boolean, which determines the box’s current color, and the _changeState() function.

Let’s test the code now, so we can understand how it works.

import 'package:flutter/material.dart';

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

class OwnStateManagingWidget extends StatefulWidget {
  @override
  _OwnStateManagingWidgetState createState() => _OwnStateManagingWidgetState();
}

class _OwnStateManagingWidgetState extends State<OwnStateManagingWidget> {
  /// let's define the boolean value first
  ///

  bool _stateChanged = false;

  /// let's create a function that will define the setState() method
  /// it'll change the state of this widget only
  ///
  void _changeState() {
    setState(() {
      _stateChanged = !_stateChanged;
    });
  }

  @override
  Widget build(BuildContext context) {
    /// we'll use GestureDetector so that we can tap a box that will turn green as
    /// the state is changed
    return MaterialApp(
      title: 'Our App',
      debugShowCheckedModeBanner: false,
      home: GestureDetector(
          onTap: _changeState,
          child: Container(
            child: Center(
              child: Text(
                _stateChanged ? "State Changed" : "State Unchanged",
                style: TextStyle(
                  decoration: TextDecoration.none,
                  fontSize: 30.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.black,
                ),
                textDirection: TextDirection.ltr,
              ),
            ),
            decoration:
                BoxDecoration(color: _stateChanged ? Colors.green : Colors.red),
          ),
        ),
    );
  }
}
State management example

The _changeState() function updates the _stateChanged boolean value to true when the box is tapped.

Once the user taps the red box as shown in the illustration below, it calls the setState() function to update the UI and make the box color green.

Managing state with stateful widgets

A Flutter stateful widget is a dynamic widget. As the user taps a box or clicks a button, it changes its state. This process updates the whole widget.

A stateful widget depends either on user action or on data change.

The State class or object manages the internal state of the stateful widget. So in this sense, a stateful widget also depends on the state class, not a widget.