La gestión de estado representa un desafío central en el desarrollo con Flutter. Riverpod y BLoC dominan el ecosistema, cada uno con una filosofía distinta. Esta guía compara ambas soluciones mediante implementaciones concretas para orientar la elección según las necesidades del proyecto.

Requisitos previos

Esta guía supone familiaridad con Flutter y los conceptos básicos de gestión de estado. Los ejemplos utilizan Riverpod 3.x y flutter_bloc 9.x, las versiones estables actuales en 2026.

Filosofías Centrales de Ambos Enfoques

Riverpod y BLoC resuelven el mismo problema con paradigmas opuestos. Comprender estas diferencias conceptuales permite elegir la herramienta adecuada para cada contexto.

Riverpod adopta un enfoque declarativo y reactivo. Los providers definen fuentes de datos que los widgets observan. El framework gestiona automáticamente el ciclo de vida, el caché y las dependencias entre providers. La versión 3.0 trae mejoras significativas: retry automático para providers fallidos, pausa/reanudación de listeners según la visibilidad del widget, y persistencia offline experimental.

BLoC (Business Logic Component) impone una arquitectura estricta orientada a eventos. Los componentes emiten eventos, el Bloc los procesa y produce nuevos estados. Esta separación explícita facilita el seguimiento del flujo de datos. La versión 9.x introduce EmittableStateStreamableSource para mayor flexibilidad en testing.

riverpod_philosophy.dartdart

// Riverpod 3.x: Notifier replaces StateNotifier as the standard pattern
@riverpod
class Counter extends _$Counter {
  @override
  int build() => 0;
  
  void increment() => state++;
}

// 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');
  }
}

bloc_philosophy.dartdart

// BLoC 9.x: explicit events/states separation
sealed class CounterEvent {}
final class IncrementPressed extends CounterEvent {}

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    // Each event has its dedicated handler
    on<IncrementPressed>((event, emit) => emit(state + 1));
  }
}

// Usage in a widget
class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CounterBloc, int>(
      builder: (context, count) => Text('$count'),
    );
  }
}

La elección entre estos enfoques depende de las preferencias del equipo y las restricciones del proyecto. Para una visión general de las opciones de gestión de estado incluyendo GetX, consulta la comparación completa de state management Flutter para 2026.

Configuración Inicial

La configuración inicial revela diferencias ergonómicas entre ambas soluciones. Riverpod prioriza la simplicidad, BLoC ofrece más estructura.

Instalación de Riverpod

Riverpod requiere un único paquete y un wrapper en la raíz de la aplicación. La generación de código con riverpod_generator es el enfoque recomendado en la versión 3.x.

main.dartdart

// 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(),
    );
  }
}

Instalación de BLoC

BLoC requiere varios paquetes y una configuración más elaborada con BlocProviders para cada Bloc utilizado.

main.dartdart

// 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(),
      ),
    );
  }
}

La configuración de BLoC requiere más código inicial pero hace explícitas las dependencias desde el principio.

Gestión de Estado Simple: Contadores y Toggles

Los casos simples ilustran la ergonomía cotidiana de cada solución. Riverpod destaca por la concisión, BLoC mantiene su estructura orientada a eventos.

Contador con Riverpod (Patrón Notifier)

Riverpod 3.x deprecia StateProvider y StateNotifierProvider en favor de la API unificada Notifier. El nuevo patrón es más limpio y funciona perfectamente con la generación de código.

counter_riverpod.dartdart

// Notifier pattern: the standard in Riverpod 3.x
@riverpod
class Counter extends _$Counter {
  @override
  int build() => 0;

  void increment() => state++;
  void decrement() => state--;
  void reset() => state = 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).increment(),
        child: const Icon(Icons.add),
      ),
    );
  }
}

Contador con BLoC

counter_bloc.dartdart

// Typed events for each possible action
sealed class CounterEvent {}
final class CounterIncremented extends CounterEvent {}
final class CounterDecremented extends CounterEvent {}
final class CounterReset extends CounterEvent {}

// Bloc with handlers for each event
class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0) {
    on<CounterIncremented>((event, emit) => emit(state + 1));
    on<CounterDecremented>((event, emit) => emit(state - 1));
    on<CounterReset>((event, emit) => emit(0));
  }
}

class CounterScreen extends StatelessWidget {
  const CounterScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: BlocBuilder<CounterBloc, int>(
          builder: (context, count) => Text('Count: $count'),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // Event dispatch to modify state
        onPressed: () => context.read<CounterBloc>().add(CounterIncremented()),
        child: const Icon(Icons.add),
      ),
    );
  }
}

Para casos simples, Riverpod reduce significativamente el boilerplate. BLoC se vuelve relevante cuando la lógica gana complejidad o cuando la trazabilidad de eventos importa.

Providers legacy en Riverpod 3.x

StateProvider y StateNotifierProvider siguen funcionando pero requieren importar desde flutter_riverpod/legacy.dart. Para código nuevo, usa Notifier o AsyncNotifier.

Gestión de Estado Asíncrono: Llamadas a API

Las operaciones asíncronas revelan la potencia de cada solución. Gestionar los estados de carga, error y datos constituye un desafío mayor. Riverpod 3.x introduce retry automático con backoff exponencial para providers fallidos.

Datos Asíncronos con Riverpod

async_riverpod.dartdart

// AsyncNotifier: automatic loading/error/data management with retry
@riverpod
class Users extends _$Users {
  @override
  Future<List<User>> build() async {
    // autoDispose releases resources when provider is no longer used
    // Automatic retry on failure (exponential backoff: 200ms to 6.4s)
    final repository = ref.watch(userRepositoryProvider);
    return repository.fetchUsers();
  }

  Future<void> refresh() async {
    state = const AsyncLoading();
    state = await AsyncValue.guard(() => build());
  }
}

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('Reintentar'),
            ),
          ],
        ),
      ),
      data: (users) => ListView.builder(
        itemCount: users.length,
        itemBuilder: (context, index) => UserTile(user: users[index]),
      ),
    );
  }
}

Datos Asíncronos con BLoC

async_bloc.dartdart

// Explicit states for each loading phase
sealed class UsersState {}
final class UsersInitial extends UsersState {}
final class UsersLoading extends UsersState {}
final class UsersLoaded extends UsersState {
  final List<User> users;
  UsersLoaded(this.users);
}
final class UsersError extends UsersState {
  final String message;
  UsersError(this.message);
}

// Events to trigger actions
sealed class UsersEvent {}
final class UsersFetchRequested extends UsersEvent {}
final class UsersRefreshRequested extends UsersEvent {}

class UsersBloc extends Bloc<UsersEvent, UsersState> {
  final UserRepository _repository;

  UsersBloc(this._repository) : super(UsersInitial()) {
    on<UsersFetchRequested>(_onFetchRequested);
    on<UsersRefreshRequested>(_onRefreshRequested);
  }

  Future<void> _onFetchRequested(
    UsersFetchRequested event,
    Emitter<UsersState> emit,
  ) async {
    emit(UsersLoading());
    try {
      final users = await _repository.fetchUsers();
      emit(UsersLoaded(users));
    } catch (e) {
      emit(UsersError(e.toString()));
    }
  }

  Future<void> _onRefreshRequested(
    UsersRefreshRequested event,
    Emitter<UsersState> 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()));
      }
    }
  }
}

users_screen_bloc.dartdart

// Widget with pattern matching on states
class UsersScreen extends StatelessWidget {
  const UsersScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<UsersBloc, UsersState>(
      builder: (context, state) {
        return switch (state) {
          UsersInitial() => Center(
              child: ElevatedButton(
                onPressed: () => context.read<UsersBloc>().add(UsersFetchRequested()),
                child: const Text('Cargar'),
              ),
            ),
          UsersLoading() => const Center(child: CircularProgressIndicator()),
          UsersError(:final message) => Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Error: $message'),
                  ElevatedButton(
                    onPressed: () => context
                        .read<UsersBloc>()
                        .add(UsersFetchRequested()),
                    child: const Text('Reintentar'),
                  ),
                ],
              ),
            ),
          UsersLoaded(:final users) => ListView.builder(
              itemCount: users.length,
              itemBuilder: (context, index) => UserTile(user: users[index]),
            ),
        };
      },
    );
  }
}

BLoC ofrece control granular sobre cada transición de estado. Riverpod automatiza más mediante AsyncValue y la lógica de retry integrada.

¿Listo para aprobar tus entrevistas de Flutter?

Practica con nuestros simuladores interactivos, flashcards y tests técnicos.

Explorar Flutter

Dependencias entre Estados: Composición e Inyección

Las aplicaciones reales involucran estados interdependientes. La gestión de estas dependencias diferencia significativamente ambos enfoques.

Composición con Riverpod

composition_riverpod.dartdart

// Base provider: configuration
@riverpod
ApiClient apiClient(Ref ref) {
  final baseUrl = ref.watch(environmentProvider).apiUrl;
  return ApiClient(baseUrl: baseUrl);
}

// Dependent provider: repository
@riverpod
ProductRepository productRepository(Ref ref) {
  // Automatic client injection
  final client = ref.watch(apiClientProvider);
  return ProductRepository(client);
}

// Provider with parameter: product by ID
@riverpod
Future<Product> product(Ref ref, String productId) async {
  final repository = ref.watch(productRepositoryProvider);
  return repository.getProduct(productId);
}

// Derived provider: filtered products
@riverpod
List<Product> filteredProducts(Ref 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),
    );
  }
}

Composición con BLoC

composition_bloc.dartdart

// Repository injected into the Bloc
class ProductBloc extends Bloc<ProductEvent, ProductState> {
  final ProductRepository _repository;
  final CartBloc _cartBloc;
  late final StreamSubscription _cartSubscription;

  ProductBloc({
    required ProductRepository repository,
    required CartBloc cartBloc,
  })  : _repository = repository,
        _cartBloc = cartBloc,
        super(ProductInitial()) {
    on<ProductFetchRequested>(_onFetchRequested);
    on<ProductAddedToCart>(_onAddedToCart);

    // Listen to cart changes
    _cartSubscription = _cartBloc.stream.listen((cartState) {
      // React to cart changes
      if (cartState is CartUpdated) {
        add(ProductCartSyncRequested(cartState.items));
      }
    });
  }

  Future<void> _onFetchRequested(
    ProductFetchRequested event,
    Emitter<ProductState> 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<void> 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<ProductRepository>(),
        cartBloc: context.read<CartBloc>(),
      )..add(ProductFetchRequested()),
      child: const ProductsView(),
    );
  }
}

Riverpod gestiona las dependencias de forma declarativa. BLoC requiere gestión manual de las suscripciones entre Blocs.

Testabilidad y Mocking

Las pruebas constituyen un criterio decisivo para proyectos profesionales. Ambas soluciones destacan en este aspecto con enfoques distintos. Las habilidades de testing se evalúan frecuentemente en entrevistas Flutter.

Pruebas con Riverpod

test_riverpod.dartdart

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;

    setUp(() {
      mockRepository = MockUserRepository();
    });

    test('returns users from repository', () async {
      // Arrange
      final expectedUsers = [User(id: '1', name: 'Test')];
      when(() => mockRepository.fetchUsers())
          .thenAnswer((_) async => expectedUsers);

      // ProviderContainer.test auto-disposes after test
      final container = ProviderContainer.test(
        overrides: [
          userRepositoryProvider.overrideWithValue(mockRepository),
        ],
      );

      // 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'));

      final container = ProviderContainer.test(
        overrides: [
          userRepositoryProvider.overrideWithValue(mockRepository),
        ],
      );

      expect(
        () => container.read(usersProvider.future),
        throwsException,
      );
    });
  });
}

Pruebas con BLoC

test_bloc.dartdart

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<UsersBloc, UsersState>(
      '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<UsersLoading>(),
        isA<UsersLoaded>().having(
          (s) => s.users.length,
          'users count',
          1,
        ),
      ],
    );

    blocTest<UsersBloc, UsersState>(
      'emits [Loading, Error] when fetch fails',
      build: () {
        when(() => mockRepository.fetchUsers())
            .thenThrow(Exception('Network error'));
        return UsersBloc(mockRepository);
      },
      act: (bloc) => bloc.add(UsersFetchRequested()),
      expect: () => [
        isA<UsersLoading>(),
        isA<UsersError>(),
      ],
    );
  });
}

El paquete bloc_test ofrece una sintaxis dedicada para probar secuencias de estados. Riverpod 3.x agrega ProviderContainer.test() para dispose automático y NotifierProvider.overrideWithBuild() para mockear solo el método build.

Cobertura de Pruebas

Probar solo los casos nominales resulta insuficiente. Las pruebas deben cubrir errores de red, timeouts, estados límite y transiciones de estado inesperadas. Para prácticas de testing completas, consulta la guía de testing Flutter.

Rendimiento y Optimización de Reconstrucciones

El rendimiento impacta directamente en la experiencia de usuario. Ambas soluciones ofrecen mecanismos distintos de optimización.

Optimización con Riverpod

perf_riverpod.dartdart

// 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
@riverpod
ExpensiveResult expensiveComputation(Ref ref) {
  final input = ref.watch(inputProvider);
  // Computation automatically cached
  return performExpensiveComputation(input);
}

// keepAlive with timer for temporary caching
@riverpod
Future<List<Product>> searchResults(Ref ref, String 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);
}

Optimización con BLoC

perf_bloc.dartdart

// buildWhen limits rebuilds conditionally
class UserNameWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocBuilder<UserBloc, UserState>(
      // 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<UserBloc, UserState, String?>(
      // 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);
      },
    );
  }
}

Ambas soluciones ofrecen optimizaciones granulares. Riverpod con select, BLoC con buildWhen y BlocSelector. Para técnicas avanzadas de rendimiento, consulta la guía de optimización de rendimiento Flutter.

Caso Práctico: Autenticación Completa

Un sistema de autenticación ilustra los patrones reales para cada solución. Este caso combina estado persistente, llamadas a API y navegación.

Autenticación con Riverpod

auth_riverpod.dartdart

// Authentication state with sealed class
sealed class AuthState {
  const AuthState();
}
final class AuthInitial extends AuthState {
  const AuthInitial();
}
final class AuthLoading extends AuthState {
  const AuthLoading();
}
final class AuthAuthenticated extends AuthState {
  final User user;
  const AuthAuthenticated(this.user);
}
final class AuthUnauthenticated extends AuthState {
  final String? error;
  const AuthUnauthenticated([this.error]);
}

// Notifier to manage auth state
@riverpod
class Auth extends _$Auth {
  @override
  Future<AuthState> build() async {
    final storage = ref.watch(secureStorageProvider);
    final repository = ref.watch(authRepositoryProvider);
    
    final token = await storage.getToken();
    if (token != null) {
      try {
        final user = await repository.getCurrentUser(token);
        return AuthAuthenticated(user);
      } catch (_) {
        await storage.deleteToken();
        return const AuthUnauthenticated();
      }
    }
    return const AuthUnauthenticated();
  }

  Future<void> login(String email, String password) async {
    state = const AsyncLoading();
    final repository = ref.read(authRepositoryProvider);
    final storage = ref.read(secureStorageProvider);
    
    try {
      final result = await repository.login(email, password);
      await storage.saveToken(result.token);
      state = AsyncData(AuthAuthenticated(result.user));
    } catch (e) {
      state = AsyncData(AuthUnauthenticated(e.toString()));
    }
  }

  Future<void> logout() async {
    final storage = ref.read(secureStorageProvider);
    await storage.deleteToken();
    state = const AsyncData(AuthUnauthenticated());
  }
}

// Redirect based on auth state
@riverpod
GoRouter router(Ref ref) {
  final authState = ref.watch(authProvider);

  return GoRouter(
    redirect: (context, state) {
      final isAuth = authState.valueOrNull is AuthAuthenticated;
      final isAuthRoute = state.matchedLocation.startsWith('/auth');

      if (!isAuth && !isAuthRoute) return '/auth/login';
      if (isAuth && isAuthRoute) return '/home';
      return null;
    },
    routes: [...],
  );
}

Autenticación con BLoC

auth_bloc.dartdart

// Exhaustive states for authentication
sealed class AuthState {
  const AuthState();
}
final class AuthInitial extends AuthState {
  const AuthInitial();
}
final class AuthCheckInProgress extends AuthState {
  const AuthCheckInProgress();
}
final class AuthLoginInProgress extends AuthState {
  const AuthLoginInProgress();
}
final class AuthSuccess extends AuthState {
  final User user;
  const AuthSuccess(this.user);
}
final class AuthFailure extends AuthState {
  final String error;
  const AuthFailure(this.error);
}
final class AuthLoggedOut extends AuthState {
  const AuthLoggedOut();
}

// Authentication events
sealed class AuthEvent {
  const AuthEvent();
}
final class AuthCheckRequested extends AuthEvent {
  const AuthCheckRequested();
}
final class AuthLoginSubmitted extends AuthEvent {
  final String email;
  final String password;
  const AuthLoginSubmitted(this.email, this.password);
}
final class AuthLogoutRequested extends AuthEvent {
  const AuthLogoutRequested();
}

class AuthBloc extends Bloc<AuthEvent, AuthState> {
  final AuthRepository _repository;
  final SecureStorage _storage;

  AuthBloc({
    required AuthRepository repository,
    required SecureStorage storage,
  })  : _repository = repository,
        _storage = storage,
        super(const AuthInitial()) {
    on<AuthCheckRequested>(_onCheckRequested);
    on<AuthLoginSubmitted>(_onLoginSubmitted);
    on<AuthLogoutRequested>(_onLogoutRequested);
  }

  Future<void> _onCheckRequested(
    AuthCheckRequested event,
    Emitter<AuthState> 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<void> _onLoginSubmitted(
    AuthLoginSubmitted event,
    Emitter<AuthState> 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<void> _onLogoutRequested(
    AuthLogoutRequested event,
    Emitter<AuthState> emit,
  ) async {
    await _storage.deleteToken();
    emit(const AuthLoggedOut());
  }
}

Ambas implementaciones cubren la misma funcionalidad con estilos diferentes. BLoC explicita cada transición, Riverpod simplifica la sintaxis.

Tabla Comparativa Resumen

Criterio	Riverpod 3.x	BLoC 9.x
Curva de aprendizaje	Moderada	Más pronunciada
Boilerplate	Mínimo (con codegen)	Significativo
Type Safety	Excelente	Excelente
Testabilidad	Excelente	Excelente
Retry automático	Integrado	Implementación manual
Persistencia offline	Soporte experimental	Paquetes externos
Trazabilidad	Vía DevTools	Eventos/Estados explícitos
Composición	Automática	Manual
Generación de código	Recomendada	No requerida
Tamaño de equipo	Flexible	Equipos grandes

Recomendaciones según el Contexto

La elección entre Riverpod y BLoC depende de varios factores contextuales.

Elegir Riverpod cuando:

El equipo prioriza la concisión y la productividad
El proyecto requiere composición flexible de estado
Los desarrolladores provienen de React u otros frameworks reactivos
El retry automático y la recuperación de errores importan
La persistencia offline es un requisito

Elegir BLoC cuando:

El equipo aprecia patrones estrictos y predecibles
El proyecto requiere trazabilidad completa de eventos para auditoría
Los juniors se benefician de una arquitectura impuesta
La depuración requiere historial de transiciones detallado
La industria exige pistas de auditoría (fintech, salud)

Fuentes

Riverpod 3.0 What's New: retry automático, pausa/reanudación, persistencia offline
Riverpod 3.0 Migration Guide: Notifier reemplaza StateNotifier
flutter_bloc 9.0.0 Changelog: EmittableStateStreamableSource, mejoras de testing
BLoC Documentation: patrones oficiales y mejores prácticas

Puntos clave de Riverpod vs BLoC en 2026

Riverpod y BLoC abordan eficazmente las necesidades de gestión de estado en Flutter. Riverpod 3.x destaca en ergonomía, manejo automático de errores y composición flexible. BLoC 9.x lidera en estructura, predecibilidad y trazabilidad de nivel empresarial. Ambas soluciones ofrecen excelente testabilidad y rendimiento óptimo.

Lista de Verificación de Decisión

Evaluar el tamaño y la experiencia del equipo
Considerar la complejidad del flujo de datos
Analizar las necesidades de trazabilidad y depuración
Probar ambas soluciones en un prototipo
Verificar la coherencia con la arquitectura existente

¡Empieza a practicar!

Pon a prueba tu conocimiento con nuestros simuladores de entrevista y tests técnicos.

Crear mi cuenta gratis

La mejor elección sigue siendo aquella que el equipo domina y mantiene de forma efectiva. La consistencia en la aplicación tiene prioridad sobre la elección de la solución en sí. Para patrones específicos de Dart como isolates y concurrencia, consulta la guía de isolates y concurrencia Dart.

Gestión de Estado en Flutter: Riverpod vs BLoC - Guía Comparativa Completa