State Management en Flutter

Cuando los desarrolladores hablan de State Management en Flutter, básicamente se refieren al patrón mediante el cual tu app actualiza los datos que necesita para renderizarse correctamente y luego le dice a Flutter que vuelva a renderizar la UI con esos nuevos datos.

En MVVM, esta responsabilidad recae en la capa ViewModel, que se encuentra entre la UI y la capa Model y las conecta. En Flutter, los ViewModels usan la clase ChangeNotifier de Flutter para notificar a la UI cuando cambian los datos.

Para usar ChangeNotifier, extiéndelo en tu clase de State Management para obtener acceso al método notifyListeners(), el cual activa reconstrucciones de la UI cuando es llamado.

Crea la clase ArticleViewModel con su estructura básica y propiedades de state:

class ArticleViewModel extends ChangeNotifier {
  final ArticleModel model;
  Summary? summary;
  Exception? error;
  bool isLoading = false;
​
  ArticleViewModel(this.model);
}

El ArticleViewModel contiene tres elementos de state:

• summary: Los datos actuales del artículo de Wikipedia.
• error: Cualquier error que haya ocurrido durante la obtención de datos.
• isLoading: Una bandera para mostrar indicadores de progreso.

Actualiza el constructor para obtener contenido automáticamente cuando se cree el ArticleViewModel:

class ArticleViewModel extends ChangeNotifier {
  final ArticleModel model;
  Summary? summary;
  Exception? error;
  bool isLoading = false;
​
  ArticleViewModel(this.model) {
    fetchArticle();
  }
​
  // Methods will be added next.
  Future<void> fetchArticle() async {}
}

Esta inicialización del constructor proporciona contenido inmediato cuando se crea un objeto ArticleViewModel. Como los constructores no pueden ser asíncronos, delega la obtención de contenido inicial en un método separado.

Agrega el método fetchArticle que obtiene datos y maneja las actualizaciones de state:

class ArticleViewModel extends ChangeNotifier {
  final ArticleModel model;
  Summary? summary;
  Exception? error;
  bool isLoading = false;
​
  ArticleViewModel(this.model) {
    fetchArticle();
  }
​
  Future<void> fetchArticle() async {
    isLoading = true;
    notifyListeners();
​
    // TODO: Add data fetching logic
​
    isLoading = false;
    notifyListeners();
  }
}

El ViewModel actualiza la propiedad isLoading y llama a notifyListeners() para informar a la UI sobre la actualización. Cuando la operación se completa, cambia la propiedad de nuevo. Cuando construyas la UI, usarás esta propiedad isLoading para mostrar un indicador de carga mientras se obtiene un nuevo artículo.

Completa el método fetchArticle para obtener el resumen de un artículo. Usa un bloque try-catch para manejar con elegancia los errores de red y almacenar los mensajes de error que la UI puede mostrar a los usuarios. El método limpia los errores anteriores en caso de éxito y limpia el resumen del artículo anterior en caso de error para mantener un state consistente.

class ArticleViewModel extends ChangeNotifier {
  final ArticleModel model;
  Summary? summary;
  Exception? error;
  bool isLoading = false;
​
  ArticleViewModel(this.model) {
    fetchArticle();
  }
​
  Future<void> fetchArticle() async {
    isLoading = true;
    notifyListeners();
    try {
      summary = await model.getRandomArticleSummary();
      error = null; // Clear any previous errors.
    } on HttpException catch (e) {
      error = e;
      summary = null;
    }
    isLoading = false;
    notifyListeners();
  }
}

Antes de construir la UI completa, prueba que tus peticiones HTTP funcionen imprimiendo los resultados en la consola. Primero, actualiza el método fetchArticle para imprimir los resultados:

Future<void> fetchArticle() async {
  isLoading = true;
  notifyListeners();
  try {
    summary = await model.getRandomArticleSummary();
    print('Article loaded: ${summary!.titles.normalized}'); // Temporary
    error = null; // Clear any previous errors.
  } on HttpException catch (e) {
    print('Error loading article: ${e.message}'); // Temporary
    error = e;
    summary = null;
  }
  isLoading = false;
  notifyListeners();
}

Luego, actualiza el widget MainApp para crear el ArticleViewModel, el cual llama al método fetchArticle al ser creado:

class MainApp extends StatelessWidget {
  const MainApp({super.key});
​
  @override
  Widget build(BuildContext context) {
    // Instantiate your `ArticleViewModel` to test its HTTP requests.
    final viewModel = ArticleViewModel(ArticleModel());
​
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Wikipedia Flutter')),
        body: const Center(child: Text('Check console for article data')),
      ),
    );
  }
}

Haz Hot Reload en tu app y revisa la salida de tu consola. Deberías ver el título de un artículo o un mensaje de error, lo que confirma que tu Model y ViewModel están conectados correctamente.