Cuándo y Cómo Usar didChangeDependencies en Flutter

Tiempo de lectura: 2 minutos

El método didChangeDependencies en Flutter es un poderoso mecanismo para manejar cambios en las dependencias de un widget. A menudo, se utiliza en combinación con el ciclo de vida de un widget para garantizar que las actualizaciones en el entorno del widget, como cambios en los widgets heredados, se manejen correctamente.

1. ¿Qué es didChangeDependencies?

didChangeDependencies es un método de ciclo de vida en la clase State que se llama:

• Después de initState(): La primera vez que se construye el widget.
• Cuando cambian las dependencias de un widget: Como resultado de cambios en cualquier InheritedWidget del cual el widget depende.

Este método es útil para realizar cualquier lógica que dependa de InheritedWidgets, como Theme.of(context), MediaQuery.of(context), o Localizations.of(context).

2. ¿Cuándo deberías usar didChangeDependencies?

Deberías considerar usar didChangeDependencies cuando:

• Necesitas acceder a datos o propiedades que provienen de InheritedWidgets después de que el widget se haya inicializado.
• Quieres ejecutar lógica cada vez que cambian las dependencias de tu widget.

Algunos ejemplos comunes incluyen:

• Detectar cambios en la orientación o tamaño de la pantalla usando MediaQuery.
• Reaccionar a cambios en la configuración de localización usando Localizations.
• Obtener temas y estilos usando Theme.of(context) en un lugar centralizado.

3. Ejemplo de Uso de didChangeDependencies

Supongamos que tienes una aplicación donde necesitas ajustar el diseño basado en la orientación de la pantalla:

class MyResponsiveWidget extends StatefulWidget {
  @override
  _MyResponsiveWidgetState createState() => _MyResponsiveWidgetState();
}

class _MyResponsiveWidgetState extends State<MyResponsiveWidget> {
  String orientation = "Unknown";

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();

    // Obtener la orientación de la pantalla
    var mediaQuery = MediaQuery.of(context);
    setState(() {
      orientation = mediaQuery.orientation == Orientation.portrait
          ? "Portrait"
          : "Landscape";
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text('Orientation: $orientation'),
    );
  }
}

Explicación:

• didChangeDependencies es llamado después de initState y cada vez que cambia la dependencia en MediaQuery.
• Cuando se detecta un cambio, se actualiza el estado del widget usando setState, y se reconstruye el widget con la orientación correcta.

4. Comparación con Otros Métodos de Ciclo de Vida

• initState(): Se usa para la inicialización de datos que no dependen de context. No es seguro usar InheritedWidgets aquí porque context aún no está completamente configurado.
• build(): Se usa para construir la interfaz de usuario y es llamado cada vez que se necesita actualizar la UI. Se usa context para obtener datos en tiempo de ejecución, pero no para lógica que necesita ejecutarse solo cuando cambian las dependencias.
• dispose(): Se usa para liberar recursos cuando el widget se elimina del árbol de widgets.

5. Buenas Prácticas

• Evita sobrecargar didChangeDependencies: No coloques lógica intensiva aquí, ya que este método puede ser llamado varias veces durante la vida de un widget.
• Usa mounted antes de llamar a setState(): Si haces una operación asíncrona dentro de didChangeDependencies, asegúrate de que el widget esté mounted antes de intentar actualizar el estado.