Flutter State Management Tutorial

1. Introduction

Goal of the Tutorial

In this tutorial, we will learn how to manage the state in Flutter applications. We will cover different state management techniques like Provider and Riverpod and how to use them effectively.

What You Will Learn

By the end of this tutorial, you will be able to:
- Understand what state management is and why it's important
- Understand different state management techniques in Flutter
- Implement Provider and Riverpod in a Flutter app

Prerequisites

You should have a basic understanding of:
- Dart programming language
- Flutter framework

2. Step-by-Step Guide

State in Flutter is the data that can be read synchronously when the build method is called. When a change in state occurs, the build method is called again to reflect the changes in the UI.

The two main categories of state are:
- Local State: A widget manages its own state.
- App State: Multiple widgets share the same state.

Provider

Provider is a state management technique that is recommended by the Flutter team. It is built on top of InheritedWidget.

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => MyModel(),
      child: MyApp(),
    ),
  );
}

Riverpod

Riverpod is a state management solution that overcomes the limitations of Provider. It allows you to access your providers from anywhere in your code.

final exampleProvider = Provider((ref) => 'Hello World');

void main() {
  runApp(
    ProviderScope(child: MyApp()),
  );
}

3. Code Examples

Provider Example

// Define a class that extends ChangeNotifier
class Counter with ChangeNotifier {
  int value = 0;

  void increment() {
    value += 1;
    notifyListeners();
  }
}

void main() {
  runApp(
    // Provide the Counter
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}

// In your widget
class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var counter = Provider.of<Counter>(context);
    return FloatingActionButton(
      onPressed: counter.increment,
      tooltip: 'Increment',
      child: Icon(Icons.add),
    );
  }
}

Riverpod Example

final counterProvider = StateProvider((ref) => 0);

void main() {
  runApp(
    ProviderScope(child: MyApp()),
  );
}

class MyButton extends ConsumerWidget {
  @override
  Widget build(BuildContext context, watch) {
    final counter = watch(counterProvider).state;
    return FloatingActionButton(
      onPressed: () => context.read(counterProvider).state++,
      tooltip: 'Increment',
      child: Icon(Icons.add),
    );
  }
}

4. Summary

• State management is crucial in Flutter app development.
• Provider and Riverpod are great state management solutions recommended by the Flutter team.
• You can use these techniques to manage both local and app state.

5. Practice Exercises

1. Create a simple app that increases a counter when a button is clicked using the Provider package.
2. Convert the app you created in Exercise 1 to use Riverpod instead of Provider.

Solutions

1. Provider Solution:

// Refer to the Provider example code above.

1. Riverpod Solution:

// Refer to the Riverpod example code above.