Contador en Flutter con setState: ejercicio resuelto
Si buscas contador en Flutter con setState, este ejercicio resuelto te enseña el patrón base para actualizar interfaz en tiempo real con estado local.
Enunciado
Construye una pantalla con:
- contador visible en el centro,
- botón para incrementar,
- botón para decrementar,
- botón para resetear a cero.
Solución en Flutter
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(home: CounterPage());
}
}
class CounterPage extends StatefulWidget {
const CounterPage({super.key});
@override
State<CounterPage> createState() => _CounterPageState();
}
class _CounterPageState extends State<CounterPage> {
int counter = 0;
void increment() => setState(() => counter += 1);
void decrement() => setState(() => counter -= 1);
void reset() => setState(() => counter = 0);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Contador con setState')),
body: Center(
child: Text('$counter', style: const TextStyle(fontSize: 48)),
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
FloatingActionButton(onPressed: increment, child: const Icon(Icons.add)),
const SizedBox(height: 8),
FloatingActionButton(onPressed: decrement, child: const Icon(Icons.remove)),
const SizedBox(height: 8),
FloatingActionButton(onPressed: reset, child: const Icon(Icons.refresh)),
],
),
);
}
}Resultado esperado
La vista actualiza el número al pulsar cada botón sin recargar pantalla ni reconstruir toda la app.
Errores frecuentes
- Modificar
counterfuera desetState. - Mezclar estado local con estado global sin necesidad.
- No separar métodos (
increment,decrement) y ensuciarbuild.
Aplicación práctica
Este patrón aparece en cualquier UI reactiva con cambios rápidos, como filtros, likes, votos o pasos de un formulario.
Siguiente ejercicio recomendado
- FutureBuilder en Flutter: ejercicio resuelto para estados de carga
- Provider en Flutter para estado global: ejercicio resuelto
- BottomNavigationBar en Flutter: ejercicio resuelto con IndexedStack
- 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 en Amazon (incluido en Kindle Unlimited)
- Suscribirte a la newsletter
FAQ
¿Cuándo usar setState en Flutter?
Cuándo el estado afecta solo al widget actual y no necesitas compartirlo en toda la app.
¿Es mejor Provider que setState?
Para estado global sí. Para estado local simple, setState suele ser la opción correcta.
¿Este ejercicio sirve para entrevistas de Flutter?
Sí. Evalúa comprensión de estado, rebuild y organización básica de pantalla.