State Management in Flutter: Provider vs Riverpod vs Bloc

State management is a crucial aspect of Flutter app development. It allows developers to control how data flows throughout the app, ensuring the user interface remains responsive and in sync with underlying data changes. In this article, we will compare three popular state management solutions in Flutter: Provide, Riverpod, and Bloc. We will also explore how these approaches integrate with Clean Architecture, complete with code examples and use cases.

What is State Management?

State management refers to the process of controlling and maintaining the state of an application in a structured manner. It involves ensuring that the user interface accurately reflects the current data and that any changes to the data are properly propagated to the UI. Effective state management becomes especially important in larger applications where multiple components need to stay synchronized.

Overview of Clean Architecture

Clean Architecture is a software design philosophy aimed at creating a maintainable and testable codebase by separating concerns into different layers. In Flutter applications, Clean Architecture typically divides the code into three main layers:

1. Data Layer: Manages data from various sources such as APIs and databases and transforms raw data into usable formats.
2. Domain Layer: Contains the core business logic. It is independent of any data source, making it highly reusable and easy to test.
3. Presentation Layer: Manages the user interface and interacts with state management to determine what is displayed to the user.

Let’s explore how Provider, Riverpod, and Bloc can be integrated into this architecture.

1.Provider

Provider is one of the simplest and most widely used state management solutions for Flutter. It utilizes InheritedWidgets to efficiently pass state through the widget tree.

Why Use Provider?

• Simple and Lightweight: Easy to set up, especially for developers seeking a quick and minimal solution.
• Good for Small or Medium-Sized Applications: Suitable for apps with straightforward requirements.
• Seamless Dependency Injection: Works well with Clean Architecture for injecting dependencies into widgets.
• Limitations: Not recommended for managing complex state or for large applications requiring advanced features.

Example: Login Flow with Clean Architecture

To illustrate how Provider can be used in a Flutter app, let’s implement a simple login flow using the Clean Architecture model:

.Domain Layer :

class LoginUseCase {
 final AuthRepository repository;
LoginUseCase({required this.repository});
Future<bool> execute(String username, String password) async {
 return await repository.login(username, password);
 }
}

. Data Layer :

class AuthRepository {
 final AuthRemoteDataSource remoteDataSource;
AuthRepository({required this.remoteDataSource});
Future<bool> login(String username, String password) async {
 return await remoteDataSource.authenticate(username, password);
 }
}
class AuthRemoteDataSource {
 Future<bool> authenticate(String username, String password) async {
 // Simulate authentication
 await Future.delayed(Duration(seconds: 2));
 return username == 'user' && password == 'password';
 }
}

. Presentation Layer (Provider Implementation) :

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

class AuthViewModel with ChangeNotifier {
 final LoginUseCase loginUseCase;
 bool _isLoading = false;
 bool? _isAuthenticated;
AuthViewModel({required this.loginUseCase});

bool get isLoading => _isLoading;
 bool? get isAuthenticated => _isAuthenticated;
Future<void> login(String username, String password) async {
 _isLoading = true;
 notifyListeners();
_isAuthenticated = await loginUseCase.execute(username, password);
 _isLoading = false;
 notifyListeners();
 }
}

void main() {
 runApp(
 MultiProvider(
 providers: [
 ChangeNotifierProvider(
 create: (_) => AuthViewModel(loginUseCase: LoginUseCase(repository: AuthRepository(remoteDataSource: AuthRemoteDataSource()))),
 )],
 child: MyApp(),),);
}


class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 home: LoginScreen(),
 );
 }
}
class LoginScreen extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
 final viewModel = Provider.of<AuthViewModel>(context);
 return Scaffold(
 appBar: AppBar(title: Text('Login with Provider')),
 body: Center(
 child: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: [
 if (viewModel.isLoading) CircularProgressIndicator(),
 if (!viewModel.isLoading && viewModel.isAuthenticated == false) Text('Login failed'),
 if (!viewModel.isLoading && viewModel.isAuthenticated == true) Text('Login successful'),
 ElevatedButton(
 onPressed: () => viewModel.login('user', 'password'),
 child: Text('Login'),
             ),
           ],
         ),
       ),
     );
   }
}

2. Riverpod

Riverpod builds on the foundations of Provider, addressing many of its limitations by offering more flexibility and better dependency injection. It is especially well-suited for larger, more complex applications.

Why Use Riverpod?

• Advanced and Flexible: Suitable for applications with more sophisticated state management needs.
• Great for Scalability: Works effectively for apps that need to grow and handle complex requirements.
• Stateless State Management: Encourages a design where state is decoupled from the UI, making it more modular and reusable.

Why Use Riverpod?

• Advanced and Flexible: Suitable for applications with more sophisticated state management needs.
• Great for Scalability: Works effectively for apps that need to grow and handle complex requirements.
• Stateless State Management: Encourages a design where state is decoupled from the UI, making it more modular and reusable.

Example: Login Flow with Riverpod :
Here’s how to use Riverpod for a login flow within the Clean Architecture framework:

. Domain Layer :

class LoginUseCase {
 final AuthRepository repository;
LoginUseCase({required this.repository});
Future<bool> execute(String username, String password) async {
 return await repository.login(username, password);
 }
}

. Data Layer :

class AuthRepository {
 final AuthRemoteDataSource remoteDataSource;
AuthRepository({required this.remoteDataSource});
Future<bool> login(String username, String password) async {
 return await remoteDataSource.authenticate(username, password);
 }
}
class AuthRemoteDataSource {
 Future<bool> authenticate(String username, String password) async {
 // Simulate authentication
 await Future.delayed(Duration(seconds: 2));
 return username == 'user' && password == 'password';
 }
}

Presentation Layer (Riverpod Implementation)

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

final authRepositoryProvider = Provider((ref) => AuthRepository(remoteDataSource: AuthRemoteDataSource()));
final loginUseCaseProvider = Provider((ref) => LoginUseCase(repository: ref.read(authRepositoryProvider)));
final authProvider = StateNotifierProvider<AuthNotifier, AuthState>((ref) {
  return AuthNotifier(loginUseCase: ref.read(loginUseCaseProvider));
});

class AuthNotifier extends StateNotifier<AuthState> {
  final LoginUseCase loginUseCase;

  AuthNotifier({required this.loginUseCase}) : super(AuthInitial());

  Future<void> login(String username, String password) async {
    state = AuthLoading();
    final success = await loginUseCase.execute(username, password);
    if (success) {
      state = AuthSuccess();
    } else {
      state = AuthFailure();
    }
  }
}

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

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

class LoginScreen extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final authState = watch(authProvider);
    final authNotifier = context.read(authProvider.notifier);

    return Scaffold(
      appBar: AppBar(title: Text('Login with Riverpod')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (authState is AuthLoading) CircularProgressIndicator(),
            if (authState is AuthFailure) Text('Login failed'),
            if (authState is AuthSuccess) Text('Login successful'),
            ElevatedButton(
              onPressed: () => authNotifier.login('user', 'password'),
              child: Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}

3.Bloc

Bloc (Business Logic Component) is one of the most powerful and structured state management solutions in Flutter. It excels at separating the UI from the business logic, providing a clear structure to handle complex state changes.

Why Use Bloc?

• Highly Suitable for Complex Applications: Bloc is ideal for projects with extensive business logic.
• Ensures Separation of Concerns: Keeps the business logic distinct from the UI, enhancing maintainability.
• Scales Well with Clean Architecture: Especially effective in managing intricate state changes across the application.

Example: Login Flow with Bloc

Here’s how to use Bloc for a login flow within the Clean Architecture framework:

Domain Layer

class LoginUseCase {
  final AuthRepository repository;

  LoginUseCase({required this.repository});

  Future<bool> execute(String username, String password) async {
    return await repository.login(username, password);
  }
}

Data Layer

class AuthRepository {
  final AuthRemoteDataSource remoteDataSource;

  AuthRepository({required this.remoteDataSource});

  Future<bool> login(String username, String password) async {
    return await remoteDataSource.authenticate(username, password);
  }
}

class AuthRemoteDataSource {
  Future<bool> authenticate(String username, String password) async {
    // Simulate authentication
    await Future.delayed(Duration(seconds: 2));
    return username == 'user' && password == 'password';
  }
}

Presentation Layer (Bloc Implementation)

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

class AuthCubit extends Cubit<AuthState> {
  final LoginUseCase loginUseCase;

  AuthCubit({required this.loginUseCase}) : super(AuthInitial());

  void login(String username, String password) async {
    emit(AuthLoading());
    final success = await loginUseCase.execute(username, password);
    if (success) {
      emit(AuthSuccess());
    } else {
      emit(AuthFailure());
    }
  }
}

abstract class AuthState {}

class AuthInitial extends AuthState {}

class AuthLoading extends AuthState {}

class AuthSuccess extends AuthState {}

class AuthFailure extends AuthState {}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BlocProvider(
        create: (_) => AuthCubit(loginUseCase: LoginUseCase(repository: AuthRepository(remoteDataSource: AuthRemoteDataSource()))),
        child: LoginScreen(),
      ),
    );
  }
}

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Login with Bloc')),
      body: BlocBuilder<AuthCubit, AuthState>(
        builder: (context, state) {
          if (state is AuthLoading) {
            return Center(child: CircularProgressIndicator());
          } else if (state is AuthFailure) {
            return Center(child: Text('Login failed'));
          } else if (state is AuthSuccess) {
            return Center(child: Text('Login successful'));
          }
          return Center(
            child: ElevatedButton(
              onPressed: () => context.read<AuthCubit>().login('user', 'password'),
              child: Text('Login'),
            ),
          );
        },
      ),
    );
  }
}

Conclusion

Choosing the right state management solution is crucial for the maintainability and scalability of your Flutter application. Provider is a great choice for smaller projects due to its simplicity, Riverpod offers more advanced features and flexibility, making it suitable for larger projects, and Bloc is ideal for complex applications with extensive business logic. Each approach integrates effectively with Clean Architecture, allowing you to create a well-structured and maintainable Flutter app.