Flutter State Managment

Welcome back! In this blog post, I’m going to dive into the world of state management in Flutter. State management is a crucial aspect of any modern application, including those built with Flutter. It’s all about tracking the state of your app and updating the UI in response to those changes. Given the myriad of state management techniques available, figuring out the best fit for your project can be quite a challenge. But don’t worry – I’m here to help! I’ll be exploring some of the most commonly used approaches for managing state in Flutter.

Common approaches to state management

1. Provider: A popular and recommended approach that simplifies state management by using a mixture of dependency injection (DI) and state propagation.
2. Bloc/Cubit: Business Logic Component (BLoC) and Cubit are libraries built to help with state management. They separate business logic from UI, making the code easier to test and maintain.
3. Redux: A predictable state container that helps you write applications that behave consistently and are easy to test.
4. MobX: A state management library that applies functional reactive programming (FRP) and makes it simple to connect the reactive data of your application with the UI.
5. Riverpod: A newer, flexible state management solution that is built on the principles of Provider but aims to overcome some of its limitations.

Each of these options has its advantages and disadvantages, and the choice between them depends on the specific requirements of your project.

StatefulWidget and StatelessWidget

Before we continue with this article, let me show you a simple example to illustrate the basic concepts of state management in Flutter, focusing on StatefulWidget and StatelessWidget.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Mat33.online',
      home: ValueModifier(),
    );
  }
}

class ValueModifier extends StatefulWidget {
  const ValueModifier({super.key});

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

class _ValueModifierState extends State<ValueModifier> {
  int _value = 0;

  void _increaseValue() {
    setState(() {
      _value++;
    });
  }

  void _decreaseValue() {
    setState(() {
      _value--;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Value Modifier')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Value: $_value',
              style: TextStyle(
                color: _value >= 0 ? Colors.green : Colors.red,
                fontSize: 24,
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                ElevatedButton(
                  onPressed: _increaseValue,
                  child: const Text('Increase'),
                ),
                const SizedBox(width: 20),
                ElevatedButton(
                  onPressed: _decreaseValue,
                  child: const Text('Decrease'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

In Example

• We define a StatefulWidget called ValueModifier.
• _value is the state variable that holds the current value.
• _increaseValue and _decreaseValue methods update _value and call setState, triggering a rebuild with the new value.
• The Text widget displays _value. Its color changes based on whether _value is positive or negative.

Feel free to copy the example into your IDE and run it. This will allow you to fully experiment and observe how state management functions in action.

In conclusion, grasping the difference between stateful and stateless widgets has been a game-changer in my Flutter journey. It not only helped me write more efficient code but also deepened my understanding of how Flutter manages state, leading to better app designs and performance. Whether you’re a beginner or an experienced developer, mastering these concepts is key to becoming proficient in Flutter.

If you find this enjoyable and would like to show your support, feel free to buy me a coffee!