Primeros Pasos

watch_it hace que tus widgets de Flutter se reconstruyan automáticamente cuando los datos cambian. Sin setState, sin StreamBuilder, solo programación reactiva simple construida sobre get_it.

Beneficios clave:

• ✅ Reconstrucciones automáticas - Los widgets se reconstruyen cuando los datos cambian, sin necesidad de setState
• ✅ Sin listeners manuales - Suscripción y limpieza automáticas, previene memory leaks
• ✅ Async más simple - Reemplaza StreamBuilder/FutureBuilder con watchStream()/watchFuture()
• ✅ Efectos secundarios - Navegación, diálogos, toasts sin reconstruir
• ✅ Helpers de ciclo de vida - callOnce() para inicialización, createOnce() para controllers
• ✅ Integración con commands - Observa commands de command_it reactivamente

Casos de uso comunes:

• Mostrar datos en vivo de managers (todos, perfiles de usuario, configuraciones) sin setState
• Mostrar actualizaciones en tiempo real de streams (mensajes de chat, notificaciones, datos de sensores)
• Navegar o mostrar diálogos en respuesta a cambios de datos
• Mostrar progreso de commands (spinners de carga, mensajes de error, estados de éxito)

Únete a nuestro servidor de soporte en Discord: https://discord.com/invite/Nn6GkYjzW

---

Instalación

Añade watch_it a tu pubspec.yaml:

dependencies:
  watch_it: ^2.0.0
  get_it: ^8.0.0  # watch_it se construye sobre get_it

---

Ejemplo Rápido

Paso 1: Registra tus objetos reactivos con get_it:

// 1. Create a manager with reactive state
class CounterManager {
  final count = ValueNotifier<int>(0);

  void increment() => count.value++;
}

// 2. Register it in get_it
void setupCounter() {
  di.registerSingleton<CounterManager>(CounterManager());
}

// 3. Watch it in your widget
class CounterWidget extends WatchingWidget {
  const CounterWidget({super.key});

  @override
  Widget build(BuildContext context) {
    // This one line makes it reactive!
    final count = watchValue((CounterManager m) => m.count);

    return Scaffold(
      body: Center(
        child: Text('Count: $count', style: TextStyle(fontSize: 48)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => di<CounterManager>().increment(),
        child: Icon(Icons.add),
      ),
    );
  }
}

Paso 2: Usa WatchingWidget y observa tus datos:

¡El widget se reconstruye automáticamente cuando el valor del contador cambia - sin necesidad de setState!

Cómo funciona:

1. WatchingWidget - Como StatelessWidget, pero con superpoderes reactivos
2. watchValue() - Observa datos de get_it y se reconstruye cuando cambian
3. Suscripciones automáticas - Sin listeners manuales, sin limpieza necesaria

El widget se suscribe automáticamente a los cambios cuando se construye y se limpia cuando se dispone.

---

Añadiendo a Apps Existentes

¿Ya tienes una app? Solo añade un mixin a tus widgets existentes:

class MyWidget extends StatelessWidget with WatchItMixin {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    final data = watchValue((DataManager m) => m.data);
    return Text('$data');
  }
}

No necesitas cambiar la jerarquía de tus widgets - solo añade with WatchItMixin y comienza a usar funciones watch.

¿Qué Sigue?

Ahora que has visto lo básico, hay mucho más que watch_it puede hacer:

→ Your First Watch Functions - Profundiza en watchValue() y otras funciones watch

→ WatchingWidgets - Aprende qué tipo de widget usar (WatchingWidget, WatchingStatefulWidget, o mixins)

→ Watching Streams & Futures - Reemplaza StreamBuilder y FutureBuilder con watchStream() y watchFuture() de una línea

→ Lifecycle Functions - Ejecuta código una vez con callOnce(), crea objetos locales con createOnce(), y gestiona disposal

¡La documentación te guiará paso a paso desde ahí!

¿Necesitas Ayuda?

• Documentación: flutter-it.dev
• Discord: Únete a nuestra comunidad
• GitHub: Reporta problemas