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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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

Práctica guiada y siguiente paso

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.