State Management in Flutter

Managing state is a crucial part of building Flutter apps. This article introduces popular state management techniques like Provider, Riverpod, and Bloc.

Why State Management?

State management helps you keep your UI in sync with your app's data. Learn how to choose the right approach for your project.

Using Provider for State Management

1. Add the provider package to your pubspec.yaml file:

   dependencies:
     provider: ^6.0.0

2. Create a simple counter example:

   import 'package:flutter/material.dart';
   import 'package:provider/provider.dart';
   
   void main() {
     runApp(
       ChangeNotifierProvider(
         create: (context) => Counter(),
         child: MyApp(),
       ),
     );
   }
   
   class Counter with ChangeNotifier {
     int _count = 0;
   
     int get count => _count;
   
     void increment() {
       _count++;
       notifyListeners();
     }
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(title: Text('Provider Example')),
           body: Center(
             child: Consumer<Counter>(
               builder: (context, counter, child) => Text('Count: ${counter.count}'),
             ),
           ),
           floatingActionButton: FloatingActionButton(
             onPressed: () => context.read<Counter>().increment(),
             child: Icon(Icons.add),
           ),
         ),
       );
     }
   }

Using Riverpod for State Management

1. Add the flutter_riverpod package to your pubspec.yaml file:

   dependencies:
     flutter_riverpod: ^2.0.0

2. Create a simple counter example:

   import 'package:flutter/material.dart';
   import 'package:flutter_riverpod/flutter_riverpod.dart';
   
   final counterProvider = StateProvider<int>((ref) => 0);
   
   void main() {
     runApp(ProviderScope(child: MyApp()));
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(title: Text('Riverpod Example')),
           body: Center(
             child: Consumer(
               builder: (context, ref, child) {
                 final count = ref.watch(counterProvider);
                 return Text('Count: $count');
               },
             ),
           ),
           floatingActionButton: FloatingActionButton(
             onPressed: () => context.read(counterProvider.notifier).state++,
             child: Icon(Icons.add),
           ),
         ),
       );
     }
   }

Using Bloc for State Management

1. Add the flutter_bloc package to your pubspec.yaml file:

   dependencies:
     flutter_bloc: ^8.0.0

2. Create a simple counter example:

   import 'package:flutter/material.dart';
   import 'package:flutter_bloc/flutter_bloc.dart';
   
   void main() {
     runApp(MyApp());
   }
   
   class CounterCubit extends Cubit<int> {
     CounterCubit() : super(0);
   
     void increment() => emit(state + 1);
   }
   
   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         home: BlocProvider(
           create: (context) => CounterCubit(),
           child: CounterPage(),
         ),
       );
     }
   }
   
   class CounterPage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(title: Text('Bloc Example')),
         body: Center(
           child: BlocBuilder<CounterCubit, int>(
             builder: (context, count) => Text('Count: $count'),
           ),
         ),
         floatingActionButton: FloatingActionButton(
           onPressed: () => context.read<CounterCubit>().increment(),
           child: Icon(Icons.add),
         ),
       );
     }
   }

By following these examples, you can choose the right state management approach for your Flutter app.