# Gerenciamento de Estado no Flutter: Riverpod vs BLoC - Guia Comparativo Completo > Comparação detalhada entre Riverpod e BLoC para gerenciamento de estado no Flutter. Arquitetura, desempenho, testabilidade e casos de uso para escolher a melhor solução. - Published: 2026-02-14 - Updated: 2026-04-28 - Author: SharpSkill - Tags: flutter, riverpod, bloc, state management, dart - Reading time: 12 min --- O gerenciamento de estado representa um desafio central no desenvolvimento Flutter. Riverpod e BLoC dominam o ecossistema, cada um oferecendo uma filosofia distinta. Este guia compara as duas soluções por meio de implementações concretas para orientar a escolha conforme as necessidades do projeto. > **Pré-requisitos** > > Este guia pressupõe familiaridade com Flutter e os fundamentos de gerenciamento de estado. Os exemplos utilizam Riverpod 2.x e flutter_bloc 8.x, as versões estáveis atuais. ## Filosofias Centrais das Duas Abordagens Riverpod e BLoC resolvem o mesmo problema com paradigmas opostos. Compreender essas diferenças conceituais permite escolher a ferramenta certa para cada contexto. **Riverpod** adota uma abordagem declarativa e reativa. Os providers definem fontes de dados que os widgets observam. O framework gerencia automaticamente o ciclo de vida, o cache e as dependências entre providers. **BLoC** (Business Logic Component) impõe uma arquitetura estrita orientada a eventos. Os componentes emitem eventos, o Bloc os processa e produz novos estados. Essa separação explícita facilita o rastreamento do fluxo de dados. ```dart // riverpod_philosophy.dart // Riverpod: simple declaration, framework handles the rest final counterProvider = StateProvider((ref) => 0); // Usage in a widget class CounterWidget extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { // Reactive read: automatic rebuild if value changes final count = ref.watch(counterProvider); return Text('$count'); } } ``` ```dart // bloc_philosophy.dart // BLoC: explicit events/states separation abstract class CounterEvent {} class IncrementPressed extends CounterEvent {} class CounterBloc extends Bloc { CounterBloc() : super(0) { // Each event has its dedicated handler on((event, emit) => emit(state + 1)); } } // Usage in a widget class CounterWidget extends StatelessWidget { @override Widget build(BuildContext context) { return BlocBuilder( builder: (context, count) => Text('$count'), ); } } ``` A escolha entre essas abordagens depende das preferências da equipe e das restrições do projeto. ## Configuração Inicial A configuração inicial revela diferenças ergonômicas entre as duas soluções. O Riverpod prioriza a simplicidade, o BLoC oferece mais estrutura. ### Instalação do Riverpod O Riverpod requer um único pacote e um wrapper na raiz da aplicação. A geração de código opcional melhora a produtividade. ```dart // main.dart // Riverpod configuration: single wrapper at root import 'package:flutter_riverpod/flutter_riverpod.dart'; void main() { runApp( // ProviderScope wraps the entire application const ProviderScope( child: MyApp(), ), ); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: HomeScreen(), ); } } ``` ### Instalação do BLoC O BLoC requer vários pacotes e uma configuração mais elaborada com BlocProviders para cada Bloc utilizado. ```dart // main.dart // BLoC configuration: explicit providers for each Bloc import 'package:flutter_bloc/flutter_bloc.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { // MultiBlocProvider for multiple Blocs return MultiBlocProvider( providers: [ BlocProvider(create: (_) => AuthBloc()), BlocProvider(create: (_) => ThemeBloc()), ], child: MaterialApp( home: HomeScreen(), ), ); } } ``` A configuração do BLoC requer mais código inicial, mas torna as dependências explícitas desde o início. ## Gerenciamento de Estado Simples: Contadores e Toggles Casos simples ilustram a ergonomia diária de cada solução. O Riverpod se destaca pela concisão, o BLoC mantém sua estrutura orientada a eventos. ### Contador com Riverpod ```dart // counter_riverpod.dart // StateProvider: simple state without complex logic final counterProvider = StateProvider((ref) => 0); class CounterScreen extends ConsumerWidget { const CounterScreen({super.key}); @override Widget build(BuildContext context, WidgetRef ref) { // watch for reactive value final count = ref.watch(counterProvider); return Scaffold( body: Center(child: Text('Count: $count')), floatingActionButton: FloatingActionButton( // read for actions (no rebuild) onPressed: () => ref.read(counterProvider.notifier).state++, child: const Icon(Icons.add), ), ); } } ``` ### Contador com BLoC ```dart // counter_bloc.dart // Typed events for each possible action sealed class CounterEvent {} class CounterIncremented extends CounterEvent {} class CounterDecremented extends CounterEvent {} class CounterReset extends CounterEvent {} // Bloc with handlers for each event class CounterBloc extends Bloc { CounterBloc() : super(0) { on((event, emit) => emit(state + 1)); on((event, emit) => emit(state - 1)); on((event, emit) => emit(0)); } } class CounterScreen extends StatelessWidget { const CounterScreen({super.key}); @override Widget build(BuildContext context) { return Scaffold( body: Center( child: BlocBuilder( builder: (context, count) => Text('Count: $count'), ), ), floatingActionButton: FloatingActionButton( // Event dispatch to modify state onPressed: () => context.read().add(CounterIncremented()), child: const Icon(Icons.add), ), ); } } ``` Para casos simples, o Riverpod reduz significativamente o boilerplate. O BLoC se torna relevante quando a lógica ganha complexidade. > **StateProvider vs StateNotifierProvider** > > O StateProvider serve para valores primitivos simples. Para objetos complexos ou lógica de negócio, StateNotifierProvider ou NotifierProvider oferecem mais controle. ## Gerenciamento de Estado Assíncrono: Chamadas de API Operações assíncronas revelam o poder de cada solução. Gerenciar os estados de carregamento, erro e dados constitui um desafio importante. ### Dados Assíncronos com Riverpod ```dart // async_riverpod.dart // FutureProvider: automatic loading/error/data management final usersProvider = FutureProvider.autoDispose>((ref) async { final repository = ref.watch(userRepositoryProvider); // autoDispose releases resources when provider is no longer used return repository.fetchUsers(); }); class UsersScreen extends ConsumerWidget { const UsersScreen({super.key}); @override Widget build(BuildContext context, WidgetRef ref) { final usersAsync = ref.watch(usersProvider); // when handles all 3 possible states return usersAsync.when( loading: () => const Center(child: CircularProgressIndicator()), error: (error, stack) => Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Error: $error'), ElevatedButton( // invalidate forces reload onPressed: () => ref.invalidate(usersProvider), child: const Text('Retry'), ), ], ), ), data: (users) => ListView.builder( itemCount: users.length, itemBuilder: (context, index) => UserTile(user: users[index]), ), ); } } ``` ### Dados Assíncronos com BLoC ```dart // async_bloc.dart // Explicit states for each loading phase sealed class UsersState {} class UsersInitial extends UsersState {} class UsersLoading extends UsersState {} class UsersLoaded extends UsersState { final List users; UsersLoaded(this.users); } class UsersError extends UsersState { final String message; UsersError(this.message); } // Events to trigger actions sealed class UsersEvent {} class UsersFetchRequested extends UsersEvent {} class UsersRefreshRequested extends UsersEvent {} class UsersBloc extends Bloc { final UserRepository _repository; UsersBloc(this._repository) : super(UsersInitial()) { on(_onFetchRequested); on(_onRefreshRequested); } Future _onFetchRequested( UsersFetchRequested event, Emitter emit, ) async { emit(UsersLoading()); try { final users = await _repository.fetchUsers(); emit(UsersLoaded(users)); } catch (e) { emit(UsersError(e.toString())); } } Future _onRefreshRequested( UsersRefreshRequested event, Emitter emit, ) async { // Keep current state during refresh final currentState = state; try { final users = await _repository.fetchUsers(); emit(UsersLoaded(users)); } catch (e) { // Restore previous state on error if (currentState is UsersLoaded) { emit(currentState); } else { emit(UsersError(e.toString())); } } } } ``` ```dart // users_screen_bloc.dart // Widget with pattern matching on states class UsersScreen extends StatelessWidget { const UsersScreen({super.key}); @override Widget build(BuildContext context) { return BlocBuilder( builder: (context, state) { return switch (state) { UsersInitial() => const Center( child: ElevatedButton( onPressed: _fetchUsers, child: Text('Load'), ), ), UsersLoading() => const Center(child: CircularProgressIndicator()), UsersError(:final message) => Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Error: $message'), ElevatedButton( onPressed: () => context .read() .add(UsersFetchRequested()), child: const Text('Retry'), ), ], ), ), UsersLoaded(:final users) => ListView.builder( itemCount: users.length, itemBuilder: (context, index) => UserTile(user: users[index]), ), }; }, ); } void _fetchUsers(BuildContext context) { context.read().add(UsersFetchRequested()); } } ``` O BLoC oferece controle granular sobre cada transição de estado. O Riverpod automatiza mais via AsyncValue. ## Dependências entre Estados: Composição e Injeção Aplicações reais envolvem estados interdependentes. O gerenciamento dessas dependências diferencia significativamente as duas abordagens. ### Composição com Riverpod ```dart // composition_riverpod.dart // Base provider: configuration final apiClientProvider = Provider((ref) { final baseUrl = ref.watch(environmentProvider).apiUrl; return ApiClient(baseUrl: baseUrl); }); // Dependent provider: repository final productRepositoryProvider = Provider((ref) { // Automatic client injection final client = ref.watch(apiClientProvider); return ProductRepository(client); }); // Provider with parameter: product by ID final productProvider = FutureProvider.autoDispose.family( (ref, productId) async { final repository = ref.watch(productRepositoryProvider); return repository.getProduct(productId); }, ); // Derived provider: filtered products final filteredProductsProvider = Provider>((ref) { final products = ref.watch(productsProvider).valueOrNull ?? []; final filter = ref.watch(productFilterProvider); return products.where((p) => p.category == filter.category).toList(); }); // Usage with parameter class ProductDetailScreen extends ConsumerWidget { final String productId; const ProductDetailScreen({super.key, required this.productId}); @override Widget build(BuildContext context, WidgetRef ref) { // family allows passing parameters final productAsync = ref.watch(productProvider(productId)); return productAsync.when( loading: () => const ProductSkeleton(), error: (e, _) => ErrorWidget(error: e), data: (product) => ProductDetails(product: product), ); } } ``` ### Composição com BLoC ```dart // composition_bloc.dart // Repository injected into the Bloc class ProductBloc extends Bloc { final ProductRepository _repository; final CartBloc _cartBloc; late final StreamSubscription _cartSubscription; ProductBloc({ required ProductRepository repository, required CartBloc cartBloc, }) : _repository = repository, _cartBloc = cartBloc, super(ProductInitial()) { on(_onFetchRequested); on(_onAddedToCart); // Listen to cart changes _cartSubscription = _cartBloc.stream.listen((cartState) { // React to cart changes if (cartState is CartUpdated) { add(ProductCartSyncRequested(cartState.items)); } }); } Future _onFetchRequested( ProductFetchRequested event, Emitter emit, ) async { emit(ProductLoading()); try { final product = await _repository.getProduct(event.productId); // Check if product is in cart final isInCart = _cartBloc.state.contains(product.id); emit(ProductLoaded(product, isInCart: isInCart)); } catch (e) { emit(ProductError(e.toString())); } } @override Future close() { _cartSubscription.cancel(); return super.close(); } } // Configuration with dependency injection class ProductsPage extends StatelessWidget { @override Widget build(BuildContext context) { return BlocProvider( create: (context) => ProductBloc( repository: context.read(), cartBloc: context.read(), )..add(ProductFetchRequested()), child: const ProductsView(), ); } } ``` O Riverpod gerencia dependências de forma declarativa. O BLoC requer gerenciamento manual das assinaturas entre Blocs. ## Testabilidade e Mocking Os testes constituem um critério decisivo para projetos profissionais. As duas soluções se destacam neste ponto com abordagens diferentes. ### Testes com Riverpod ```dart // test_riverpod.dart import 'package:flutter_riverpod/flutter_riverpod.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:mocktail/mocktail.dart'; class MockUserRepository extends Mock implements UserRepository {} void main() { group('UserProvider Tests', () { late MockUserRepository mockRepository; late ProviderContainer container; setUp(() { mockRepository = MockUserRepository(); // Isolated container with override container = ProviderContainer( overrides: [ userRepositoryProvider.overrideWithValue(mockRepository), ], ); }); tearDown(() => container.dispose()); test('returns users from repository', () async { // Arrange final expectedUsers = [User(id: '1', name: 'Test')]; when(() => mockRepository.fetchUsers()) .thenAnswer((_) async => expectedUsers); // Act final users = await container.read(usersProvider.future); // Assert expect(users, expectedUsers); verify(() => mockRepository.fetchUsers()).called(1); }); test('handles repository errors', () async { when(() => mockRepository.fetchUsers()) .thenThrow(Exception('Network error')); expect( () => container.read(usersProvider.future), throwsException, ); }); }); } ``` ### Testes com BLoC ```dart // test_bloc.dart import 'package:bloc_test/bloc_test.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:mocktail/mocktail.dart'; class MockUserRepository extends Mock implements UserRepository {} void main() { group('UsersBloc Tests', () { late MockUserRepository mockRepository; setUp(() { mockRepository = MockUserRepository(); }); // blocTest simplifies state sequence testing blocTest( 'emits [Loading, Loaded] when fetch succeeds', build: () { when(() => mockRepository.fetchUsers()) .thenAnswer((_) async => [User(id: '1', name: 'Test')]); return UsersBloc(mockRepository); }, act: (bloc) => bloc.add(UsersFetchRequested()), expect: () => [ isA(), isA().having( (s) => s.users.length, 'users count', 1, ), ], ); blocTest( 'emits [Loading, Error] when fetch fails', build: () { when(() => mockRepository.fetchUsers()) .thenThrow(Exception('Network error')); return UsersBloc(mockRepository); }, act: (bloc) => bloc.add(UsersFetchRequested()), expect: () => [ isA(), isA(), ], ); }); } ``` O pacote `bloc_test` oferece sintaxe dedicada para testar sequências de estado. O Riverpod usa padrões de teste padrão do Flutter. > **Cobertura de Testes** > > Testar apenas casos nominais é insuficiente. Os testes precisam cobrir erros de rede, timeouts, estados-limite e transições de estado inesperadas. ## Desempenho e Otimização de Rebuilds O desempenho impacta diretamente a experiência do usuário. As duas soluções oferecem mecanismos distintos de otimização. ### Otimização com Riverpod ```dart // perf_riverpod.dart // select to rebuild only if targeted value changes class UserNameWidget extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { // Rebuilds only if user.name changes final name = ref.watch(userProvider.select((user) => user.name)); return Text(name); } } // Provider with automatic caching final expensiveComputationProvider = Provider((ref) { final input = ref.watch(inputProvider); // Computation automatically cached return performExpensiveComputation(input); }); // autoDispose to release unused resources final searchResultsProvider = FutureProvider.autoDispose .family, String>((ref, query) async { // Temporary keepAlive during typing final link = ref.keepAlive(); // Timer to release after inactivity final timer = Timer(const Duration(seconds: 30), link.close); ref.onDispose(timer.cancel); return searchProducts(query); }); ``` ### Otimização com BLoC ```dart // perf_bloc.dart // buildWhen limits rebuilds conditionally class UserNameWidget extends StatelessWidget { @override Widget build(BuildContext context) { return BlocBuilder( // Rebuilds only if name changes buildWhen: (previous, current) { if (previous is UserLoaded && current is UserLoaded) { return previous.user.name != current.user.name; } return true; }, builder: (context, state) { if (state is UserLoaded) { return Text(state.user.name); } return const SizedBox.shrink(); }, ); } } // BlocSelector to extract a specific value class UserAvatarWidget extends StatelessWidget { @override Widget build(BuildContext context) { return BlocSelector( // Select only the avatar URL selector: (state) => state is UserLoaded ? state.user.avatarUrl : null, builder: (context, avatarUrl) { if (avatarUrl == null) return const DefaultAvatar(); return NetworkImage(avatarUrl); }, ); } } ``` As duas soluções oferecem otimizações granulares. Riverpod com `select`, BLoC com `buildWhen` e `BlocSelector`. ## Caso Prático: Autenticação Completa Um sistema de autenticação ilustra os padrões reais de cada solução. Este caso combina estado persistente, chamadas de API e navegação. ### Autenticação com Riverpod ```dart // auth_riverpod.dart // Authentication state with sealed class sealed class AuthState { const AuthState(); } class AuthInitial extends AuthState { const AuthInitial(); } class AuthLoading extends AuthState { const AuthLoading(); } class AuthAuthenticated extends AuthState { final User user; const AuthAuthenticated(this.user); } class AuthUnauthenticated extends AuthState { final String? error; const AuthUnauthenticated([this.error]); } // Notifier to manage auth state class AuthNotifier extends StateNotifier { final AuthRepository _repository; final SecureStorage _storage; AuthNotifier(this._repository, this._storage) : super(const AuthInitial()) { _checkAuthStatus(); } Future _checkAuthStatus() async { final token = await _storage.getToken(); if (token != null) { try { final user = await _repository.getCurrentUser(token); state = AuthAuthenticated(user); } catch (_) { await _storage.deleteToken(); state = const AuthUnauthenticated(); } } else { state = const AuthUnauthenticated(); } } Future login(String email, String password) async { state = const AuthLoading(); try { final result = await _repository.login(email, password); await _storage.saveToken(result.token); state = AuthAuthenticated(result.user); } catch (e) { state = AuthUnauthenticated(e.toString()); } } Future logout() async { await _storage.deleteToken(); state = const AuthUnauthenticated(); } } // Provider with injected dependencies final authProvider = StateNotifierProvider((ref) { return AuthNotifier( ref.watch(authRepositoryProvider), ref.watch(secureStorageProvider), ); }); // Redirect based on auth state final routerProvider = Provider((ref) { final authState = ref.watch(authProvider); return GoRouter( redirect: (context, state) { final isAuth = authState is AuthAuthenticated; final isAuthRoute = state.matchedLocation.startsWith('/auth'); if (!isAuth && !isAuthRoute) return '/auth/login'; if (isAuth && isAuthRoute) return '/home'; return null; }, routes: [...], ); }); ``` ### Autenticação com BLoC ```dart // auth_bloc.dart // Exhaustive states for authentication sealed class AuthState { const AuthState(); } class AuthInitial extends AuthState { const AuthInitial(); } class AuthCheckInProgress extends AuthState { const AuthCheckInProgress(); } class AuthLoginInProgress extends AuthState { const AuthLoginInProgress(); } class AuthSuccess extends AuthState { final User user; const AuthSuccess(this.user); } class AuthFailure extends AuthState { final String error; const AuthFailure(this.error); } class AuthLoggedOut extends AuthState { const AuthLoggedOut(); } // Authentication events sealed class AuthEvent { const AuthEvent(); } class AuthCheckRequested extends AuthEvent { const AuthCheckRequested(); } class AuthLoginSubmitted extends AuthEvent { final String email; final String password; const AuthLoginSubmitted(this.email, this.password); } class AuthLogoutRequested extends AuthEvent { const AuthLogoutRequested(); } class AuthBloc extends Bloc { final AuthRepository _repository; final SecureStorage _storage; AuthBloc({ required AuthRepository repository, required SecureStorage storage, }) : _repository = repository, _storage = storage, super(const AuthInitial()) { on(_onCheckRequested); on(_onLoginSubmitted); on(_onLogoutRequested); } Future _onCheckRequested( AuthCheckRequested event, Emitter emit, ) async { emit(const AuthCheckInProgress()); final token = await _storage.getToken(); if (token == null) { emit(const AuthLoggedOut()); return; } try { final user = await _repository.getCurrentUser(token); emit(AuthSuccess(user)); } catch (_) { await _storage.deleteToken(); emit(const AuthLoggedOut()); } } Future _onLoginSubmitted( AuthLoginSubmitted event, Emitter emit, ) async { emit(const AuthLoginInProgress()); try { final result = await _repository.login(event.email, event.password); await _storage.saveToken(result.token); emit(AuthSuccess(result.user)); } catch (e) { emit(AuthFailure(e.toString())); } } Future _onLogoutRequested( AuthLogoutRequested event, Emitter emit, ) async { await _storage.deleteToken(); emit(const AuthLoggedOut()); } } ``` As duas implementações cobrem a mesma funcionalidade com estilos diferentes. O BLoC explicita cada transição, o Riverpod simplifica a sintaxe. ## Tabela Comparativa Resumo | Critério | Riverpod | BLoC | |----------|----------|------| | **Curva de aprendizado** | Moderada | Mais íngreme | | **Boilerplate** | Mínimo | Significativo | | **Type Safety** | Excelente | Excelente | | **Testabilidade** | Excelente | Excelente | | **Rastreabilidade** | Via DevTools | Eventos/Estados explícitos | | **Composição** | Automática | Manual | | **Geração de código** | Opcional | Não necessária | | **Tamanho da equipe** | Flexível | Equipes grandes | ## Recomendações por Contexto A escolha entre Riverpod e BLoC depende de vários fatores contextuais. **Escolher Riverpod quando:** - A equipe prioriza concisão e produtividade - O projeto requer composição flexível de estado - Os desenvolvedores vêm do React ou de outros frameworks reativos - O cache automático representa uma vantagem significativa **Escolher BLoC quando:** - A equipe valoriza padrões estritos e previsíveis - O projeto exige rastreabilidade completa de eventos - Os juniores se beneficiam de uma arquitetura imposta - A depuração requer histórico de transições ## Conclusão Riverpod e BLoC atendem com eficácia às necessidades de gerenciamento de estado no Flutter. O Riverpod se destaca pela ergonomia e flexibilidade, o BLoC pela estrutura e previsibilidade. As duas soluções oferecem excelente testabilidade e desempenho otimizado. ### Checklist de Decisão - ✅ Avaliar o tamanho e a experiência da equipe - ✅ Considerar a complexidade do fluxo de dados - ✅ Analisar as necessidades de rastreabilidade e depuração - ✅ Testar as duas soluções em um protótipo - ✅ Verificar a coerência com a arquitetura existente A melhor escolha continua sendo aquela que a equipe domina e mantém de forma eficaz. A consistência na aplicação tem prioridade sobre a escolha da solução em si. --- Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack. HTML version of this page: https://sharpskill.dev/pt/blog/flutter/flutter-state-management-riverpod-vs-bloc