El patrón MVVM (Model-View-ViewModel) es una arquitectura muy utilizada en el desarrollo de aplicaciones modernas debido a su capacidad para separar la lógica de la interfaz de usuario, facilitando el mantenimiento y la escalabilidad del código. En esta guía, te mostraremos los pasos para implementar MVVM en una aplicación Flutter.
Paso 1:
Configurar el Proyecto Flutter
Antes de comenzar con la implementación del patrón MVVM, necesitas crear un nuevo proyecto Flutter o utilizar uno existente.
1. Crear un proyecto Flutter:
flutter create mvvm_example
cd mvvm_example
2. Instalar dependencias necesarias:
Puedes necesitar algunas librerías como provider o get_it para la inyección de dependencias y gestión de estado.
flutter pub add provider
flutter pub add get_it
Paso 2:
Estructurar el Proyecto según MVVM
Una de las claves para implementar MVVM es estructurar tu proyecto correctamente. Aquí tienes una estructura básica:
lib/
│
├── models/
│ └── user_model.dart
├── views/
│ └── user_view.dart
├── viewmodels/
│ └── user_viewmodel.dart
├── services/
│ └── user_service.dart
└── main.dart
- models/: Aquí defines tus modelos de datos.
- views/: Contiene las pantallas o widgets que representan la UI.
- viewmodels/: Aquí se maneja la lógica de negocio y la interacción con los modelos.
- services/: Servicios para interactuar con APIs u otros recursos externos.
Paso 3:
Crear el ViewModel
El ViewModel interactúa con el modelo y actualiza la vista. Aquí es donde encapsulas la lógica de negocio:
import 'package:flutter/material.dart';
import 'package:mvvm_example/models/user_model.dart';
import 'package:mvvm_example/services/user_service.dart';
class UserViewModel extends ChangeNotifier {
final UserService _userService = UserService();
UserModel? _user;
UserModel? get user => _user;
Future<void> fetchUser(String id) async {
_user = await _userService.getUserById(id);
notifyListeners();
}
}
Paso 4:
Crear la Vista
La vista (View) es el lugar donde se representa la UI. Usando ChangeNotifierProvider de provider, puedes vincular la vista con el ViewModel:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:mvvm_example/viewmodels/user_viewmodel.dart';
class UserView extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Consumer<UserViewModel>(
builder: (context, vm, _) {
return Scaffold(
appBar: AppBar(title: Text('User Profile')),
body: vm.user != null ? Column(
children: [
Text('Name: ${vm.user!.name}'),
Text('Email: ${vm.user!.email}'),
],
) : Center(child: CircularProgressIndicator()),
floatingActionButton: FloatingActionButton(
onPressed: () {
vm.fetchUser('1'); // Llama a la función del ViewModel
},
child: Icon(Icons.refresh),
),
);
}
);
}
}
Paso 5:
Configurar el Main
En el archivo main.dart, configura los proveedores para inyectar el ViewModel en la aplicación:
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:mvvm_example/viewmodels/user_viewmodel.dart';
import 'package:mvvm_example/views/user_view.dart';
void main() {
runApp(
MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => UserViewModel()),
],
child: MyApp(),
),
);
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: UserView(),
);
}
}
Conclusión
Siguiendo estos pasos, has implementado el patrón MVVM en una aplicación Flutter básica. Este patrón te ayudará a mantener tu código más organizado y fácil de mantener, especialmente a medida que tu aplicación crezca en complejidad. Experimenta con este patrón en tus proyectos y ajusta la estructura según tus necesidades.
¡Espero que este tutorial te haya sido útil! No dudes en dejar tus preguntas o comentarios abajo.