Comparison of State Management with Flutter

Introduction

Flutter, in addition to being a popular framework for advanced mobile application development, offers different approaches to managing application state. In this article, we will compare various state management methods used in Flutter and discuss the advantages and disadvantages each provides. The right state management method may vary depending on your project’s requirements.

State Management Methods

1. Provider

Provider is one of the most popular state management solutions designed for Flutter. It stands out with its simple use and high performance. With Provider, we can effectively manage the application state and automatically detect when it needs to be updated.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ChangeNotifierProvider(
        create: (context) => Counter(),
        child: CounterScreen(),
      ),
    );
  }
}

class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }
}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var counter = Provider.of(context);
    return Scaffold(
      appBar: AppBar(title: Text('Provider Example')), 
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [ 
            Text('Click Count: �24{counter.count}'),
            ElevatedButton(
              onPressed: counter.increment,
              child: Text('Increase'),
            ),
          ],
        ),
      ),
    );
  }
}

2. BLoC (Business Logic Component)

BLoC is another commonly used approach for state management in Flutter. It uses streams to manage data flow. By separating the business logic of your application from the UI, it provides a cleaner and more sustainable code structure.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (context) => CounterBloc(),
        child: CounterScreen(),
      ),
    );
  }
}

class CounterBloc extends Bloc {
  CounterBloc() : super(0);

  @override
  Stream mapEventToState(CounterEvent event) async* {
    if (event is IncrementEvent) {
      yield state + 1;
    }
  }
}

class CounterEvent {}
class IncrementEvent extends CounterEvent {}

class CounterScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('BLoC Example')), 
      body: Center(
        child: BlocBuilder(
          builder: (context, count) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [ 
                Text('Click Count: $count'),
                ElevatedButton(
                  onPressed: () {
                    BlocProvider.of(context).add(IncrementEvent());
                  },
                  child: Text('Increase'),
                ),
              ],
            );
          },
        ),
      ),
    );
  }
}

3. Riverpod

Riverpod is a more advanced and scalable version of Provider. It draws attention with having many more building blocks and providing complete type safety at compile time. Its usage is quite simple and it provides greater flexibility in managing application state.

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

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

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

final counterProvider = StateNotifierProvider<CounterNotifier, int>((ref) => CounterNotifier());

class CounterNotifier extends StateNotifier<int> {
  CounterNotifier() : super(0);

  void increment() => state++;
}

class CounterScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final count = watch(counterProvider);
    return Scaffold(
      appBar: AppBar(title: Text('Riverpod Example')), 
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [ 
            Text('Click Count: $count'),
            ElevatedButton(
              onPressed: () {
                context.read(counterProvider.notifier).increment();
              },
              child: Text('Increase'),
            ),
          ],
        ),
      ),
    );
  }
}

Conclusion

There are different approaches to state management in Flutter that come with their own advantages. Methods such as Provider, BLoC, and Riverpod should be chosen according to your project's requirements. As you manage your projects, you can get the best results by trying these methods. No matter which method you prefer, you should make the right choice to increase your code quality and optimize your app’s performance.