Arquitectura MVVM en Flutter: Mejores Prácticas con provider y HTTP

Flutter es una tecnología para desarrollar todo tipo de aplicaciones para Android, iOS, MacOS, Windows, Linux y Web creada por Google; a diferencia de otras tecnologías Flutter no proporciona una arquitectura específica para el desarrollo de aplicaciones como el MVC. Por lo tanto, queda de nuestra parte especificar la arquitectura según el proyecto que estemos desaarrollando.

Una de las arquitecturas populares para aplicaciones Flutter es MVVM (Model-View-ViewModel). En este artículo, vamos a conocer como implementar MVVM en Flutter utilizando el paquete provider para la gestión de estados y el paquete HTTP para realizar solicitudes al servidor.

Beneficios de MVVM

MVVM ofrece varios beneficios clave:

Separación de la lógica de negocio y la interfaz de usuario: MVVM permite mantener la lógica de negocio en el ViewModel, mientras que la Vista (UI) se mantiene independiente.
Facilidad de mantenimiento y actualización: Al separar la lógica y la interfaz de usuario, es más fácil mantener y actualizar el código.
Facilidad para escribir pruebas unitarias: MVVM facilita la escritura de casos de prueba para el proyecto.
Reutilización de ViewModels: Un ViewModel puede proporcionar datos a varias vistas.

Componentes de MVVM

Modelo (Model): Esta capa se encarga de obtener datos del servidor o de la base de datos local y transferirlos al ViewModel. Aquí definimos la comunicación con la API y la base de datos local.
ViewModel: El ViewModel se utiliza para transferir datos entre la Vista y el Modelo. Acepta eventos del usuario y solicita datos al Modelo. Una vez que el Modelo tiene los datos, los devuelve al ViewModel, que a su vez notifica a la Vista.
Vista (View): La Vista es donde el usuario interactúa con los widgets que se muestran en la pantalla. Los eventos del usuario solicitan datos al ViewModel, y este procesa la solicitud y refleja los datos en la Vista.

Estructura de Carpetas

Para seguir las mejores prácticas de MVVM, podemos organizar nuestro proyecto de la siguiente manera:

network: Aquí se encuentran todas las clases relacionadas con la comunicación de red y la base de datos local.
models: Contiene todas las clases de modelo para las respuestas de la API. Se pueden crear subdirectorios para cada modelo de respuesta.
repository: Aquí se encuentran todas las clases de repositorio utilizadas para comunicarse con el ViewModel. También se pueden crear subdirectorios para cada módulo del proyecto.
res: Contiene clases relacionadas con colores, dimensiones y archivos de cadenas.
utils: Aquí se encuentran las clases de utilidad para el proyecto.
view: Contiene todas las clases relacionadas con la interfaz de usuario, con subdirectorios para cada módulo y widget del proyecto.

Ejemplo de Implementación

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

// Modelo de datos
class Item {
  final String title;
  final String description;

  Item({required this.title, required this.description});
}

// ViewModel
class ItemViewModel extends ChangeNotifier {
  List<Item> _items = [];

  List<Item> get items => _items;

  void fetchItems() {
    // Lógica para obtener datos del servidor o la base de datos local
    // y actualizar _items
    // ...
    notifyListeners();
  }
}

// Vista
class ItemListView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final itemViewModel = Provider.of<ItemViewModel>(context);

    return Scaffold(
      appBar: AppBar(title: Text('Lista de elementos')),
      body: ListView.builder(
        itemCount: itemViewModel.items.length,
        itemBuilder: (context, index) {
          final item = itemViewModel.items[index];
          return ListTile(
            title: Text(item.title),
            subtitle: Text(item.description),
          );
        },
      ),
    );
  }
}

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => ItemViewModel(),
      child: MaterialApp(
        home: ItemListView(),
      ),
    ),
  );
}

Artículo recomendado:

https://marajhussain.medium.com/flutter-mvvm-architecture-best-practice-using-provide-http-4939bdaae171

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz En Udemy