Riverpod en Flutter: ejercicio resuelto con contador

Riverpod en Flutter: ejercicio resuelto

Si buscas Riverpod en Flutter ejemplo resuelto, este ejercicio te enseña una base limpia para estado global sin setState en el widget principal.

Enunciado

Crea una app con:

• contador en pantalla,
• botón para incrementar,
• estado gestionado con Riverpod.

Solución en Flutter

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

final counterProvider = StateProvider<int>((ref) => 0);

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: CounterPage());
  }
}

class CounterPage extends ConsumerWidget {
  const CounterPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final count = ref.watch(counterProvider);

    return Scaffold(
      appBar: AppBar(title: const Text('Riverpod Counter')),
      body: Center(child: Text('Valor: $count', style: const TextStyle(fontSize: 24))),
      floatingActionButton: FloatingActionButton(
        onPressed: () => ref.read(counterProvider.notifier).state++,
        child: const Icon(Icons.add),
      ),
    );
  }
}

Resultado esperado

Cada toque en el botón suma 1 y actualiza la interfaz automáticamente.

Errores frecuentes

• No envolver la app con ProviderScope.
• Usar read para pintar UI en lugar de watch.
• Mezclar estado local y global sin criterio.

Aplicación práctica

Riverpod es útil para apps que crecerán en número de pantallas y lógica compartida.

Siguiente ejercicio recomendado

• Provider en Flutter para estado global: ejercicio resuelto
• FutureBuilder en Flutter: ejercicio resuelto
• Todos los ejercicios Flutter

Práctica guiada y siguiente paso

• Más ejercicios de Flutter
• Ejercicios C para reforzar fundamentos
• Programación en C en 100 ejercicios resueltos
• Ver el libro en Amazon (incluido en Kindle Unlimited)
• Suscribirte a la newsletter

FAQ

¿Riverpod es mejor que Provider para empezar?

Depende del proyecto. Riverpod suele escalar mejor y evita algunos errores de contexto.

¿Qué tipo de provider uso para un contador?

Para un caso simple, StateProvider<int> es suficiente.

¿Sirve este patrón para apps reales?

Sí. Es una base práctica para evolucionar hacia estados más complejos.