Flutter State Management for Rookies

When it comes to state management in Flutter, I believe there are only three ways to do it: the right way, the smart way, and my way. That's what I'm here to discuss. State management is one of the most important concepts of Flutter. It defines how an app’s data changes over time and how different widgets and UI grow and interact. Before we begin, let's discuss the basics so that we are all on the same Page.

Fluter 101 😒

Flutter is an open-source cross-platform Framework think of React Native but better.

State pretty much refers to the current condition or data of an application at any given moment.

Management is the act of managing something.

I don't have any plans for Valentine's day 💔 just putting that out there.

State management in Dart and Flutter is all about managing the data that the app will render and how it will respond to user input. It’s about tracking changes to the state and updating the UI to reflect these changes. Understanding this concept is the first step towards mastering state management.

It's important to note that Flutter is declarative. Now what does that mean? It means that Flutter builds its user interface to reflect the current state of the app. When the state of the app changes (for example, the user flips a switch in the settings screen), you change the state, and that triggers a redraw of the user interface. There is no imperative changing of the UI itself (like.widget.setText) you change the state, and the UI rebuilds from scratch. Now, the Declarative state model is further classified into Ephemeral State (local state) and App State (global state) but let's not get too technical

How to Manage state 😎

The Right Way
Flutter comes with setState() for basic state updates. It is the most basic form of state management in Flutter. It's like the trusty Swiss Army knife of state management – useful for simple tasks. You would use it in a StatefulWidget by calling setState().

int _counter = 0;

void _incrementCounter() {
  setState(() {
    _counter++;
  });
}

However, for more complex apps, setState() can become unwieldy. Imagine using a Swiss Army knife to build a house – doable, but you'd probably want a proper toolbox. it's best suited for simple and localized state not meant to be shared across widgets.

The Smart way 🤓

There are several techniques for managing State in Flutter Each of them having significant strengths and weaknesses some of the most effective ways of state management approaches in Flutter include:

Provider 🪛: A simple and flexible package that makes state accessible throughout your widget tree. This is a mixture of dependency injection (DI) and state management, built with widgets for widgets. It’s a powerful and flexible way to manage state in Flutter. Think of it like having a shared whiteboard where everyone can see and update the state.

📝sidebar: Dependency Injection (DI) is a design pattern in programming that helps you write more modular, testable, and maintainable code. Think of it as instead of a class creating its own dependencies (like a car building its engine), it receives those dependencies from the outside (like the engine being delivered to the car factory).

The Provider wraps the InheritedWidget and hence makes state changes easier. It is one of the most suggested and prevalent approaches. Mostly used with medium to large apps for sharing app state in multiple widgets.

BLoC (Business Logic Component) 🧱: It’s a library that allows for predictable state management. It separates the business logic from the UI, where the state changes are managed through streams. making your code cleaner and easier to test. It's like having a dedicated team handling the data, while the UI team focuses on displaying it.

This is mostly used in large-scale apps where one wants a clean separation of concerns and has to deal with complex state transitions.

Riverpod 🤖: A compile-safe and testable alternative to Provider. Think of it as Provider 2.0, it's an advanced version of Provider. In some sense, it’s designed to overcome some limitations of Provider while adding better flexibility and testability.

Perfect for complex applications that require a robust and scalable state management solution.

GetX ❎: It provides high performance and is used when the app requires a large UI update. it is very simple and easy and offers state management, dependency injection, and route management together in just one package.

Best for small and medium apps. Use if you need a really fast and easy solution with just a bit of boilerplate.

Implementing State Management 👽

Once you’ve chosen a state management technique, the next step is to implement it in your app. This involves creating a state object, updating the state, and listening for state changes. For example, if you’re using the Provider technique, you would create a ChangeNotifierProvider and use the Consumer widget to listen for changes

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

// Model to hold the counter value
class CounterModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // Important: Notify listeners of the change
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => CounterModel(), // Create the model
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CounterScreen(),
    );
  }
}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Provider Counter')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Count:',
              style: TextStyle(fontSize: 24),
            ),
            // Consumer rebuilds only when the count changes
            Consumer<CounterModel>(
              builder: (context, counter, child) {
                return Text(
                  '${counter.count}',
                  style: TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Access the model and increment
          Provider.of<CounterModel>(context, listen: false).increment();
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

Testing your State Management 🧪

After implementing state management, it’s important to test it to ensure it’s working as expected. This involves creating unit tests, widget tests, and integration tests. Testing is a crucial part of the development process, ensuring that your code works correctly and helping to prevent bugs and errors.

void main() {
  test('should increment counter', () {
    final myModel = MyModel();
    myModel.increment();
    expect(myModel.counter, 1);
  });
}

Choosing a Flutter State Management Approach 🚛

Choosing the right state management approach depends on several factors:

• The complexity of an App: Is your app complex? If it is simple, then setState will do. For medium to higher-complexity apps, though, you need a stronger method, such as Bloc or Riverpod.

• Scalability: Think about how your approach will scale when your app grows. Provider and Riverpod are highly scalable.

• Ease of use: Now, if you are on the search for something easy to implement and fast, then comes into play GetX with its simplicity.

• Community support: It helps to have the approach that has the community — behind with good documentation. Provider is very well documented, and it has a large community due to being a part of the Flutter ecosystem.

Some Mobile Development Jokes (Because Why Not?) 🃏

• Why did the Flutter developer bring a ladder to the project meeting? Because they heard the app needed to be cross-platform!

• What's the difference between a good programmer and a bad programmer? The good one worries about the code, and the bad one worries about the deployment. (And the Flutter developer worries about both, while also trying to figure out why the layout is breaking on Android)

Conclusion 💁🏽‍♂️

State management might seem daunting at first, but it's a crucial skill for any Flutter developer. It allows you to create more efficient, scalable, and maintainable apps. While it can be challenging to grasp at first, with practice and understanding, you can become proficient in it. By understanding the basics and exploring different solutions, you can tame the widget zoo and build robust, performant apps. Remember, the key to mastering state management is understanding the concept, choosing the right technique, implementing it correctly, testing it thoroughly, and optimizing it for the best performance.

PS: What's your Valentine plan if any?