MVVM trong Flutter: Kiến trúc giúp tối ưu hóa quản lý trạng thái

MVVM (Model-View-ViewModel) là một kiến trúc phổ biến giúp tách biệt giao diện người dùng và logic nghiệp vụ, giúp ứng dụng dễ bảo trì và mở rộng hơn. Trong bài viết này, chúng ta sẽ tìm hiểu cách áp dụng MVVM vào dự án Flutter.

1. Thành phần của MVVM

• Model: Quản lý dữ liệu và logic nghiệp vụ, thường tương tác với API hoặc cơ sở dữ liệu.
• View: Giao diện hiển thị cho người dùng.
• ViewModel: Trung gian giữa Model và View, xử lý logic và cung cấp dữ liệu cho View.

2. Lợi ích của MVVM

• Giúp tách biệt rõ ràng giữa UI và logic nghiệp vụ.
• Dễ dàng kiểm thử (unit test) vì View và Model độc lập.
• Tái sử dụng code hiệu quả hơn.
• Cải thiện khả năng quản lý trạng thái.

3. Cách triển khai MVVM trong Flutter

1. Tạo Model: Xây dựng các lớp để quản lý dữ liệu.
2. Tạo ViewModel: Sử dụng ChangeNotifier hoặc Riverpod để quản lý trạng thái.
3. Kết nối View với ViewModel: Sử dụng Provider hoặc StateNotifier để cập nhật giao diện theo dữ liệu.

4. Ví dụ triển khai đơn giản

Giả sử chúng ta có một ứng dụng hiển thị danh sách sản phẩm.

Bước 1: Tạo Model

class Product {
  final String name;
  final double price;

  Product({required this.name, required this.price});
}

Bước 2: Tạo ViewModel

import 'package:flutter/material.dart';

class ProductViewModel extends ChangeNotifier {
  List<Product> _products = [
    Product(name: "Laptop", price: 1200),
    Product(name: "Smartphone", price: 800),
  ];

  List<Product> get products => _products;
}

Bước 3: Tạo View và kết nối với ViewModel

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

class ProductListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final viewModel = Provider.of<ProductViewModel>(context);
    
    return Scaffold(
      appBar: AppBar(title: Text("Danh sách sản phẩm")),
      body: ListView.builder(
        itemCount: viewModel.products.length,
        itemBuilder: (context, index) {
          final product = viewModel.products[index];
          return ListTile(
            title: Text(product.name),
            subtitle: Text("Giá: \$${product.price}"),
          );
        },
      ),
    );
  }
}

5. Kết luận

MVVM giúp tổ chức mã nguồn gọn gàng, dễ bảo trì và mở rộng. Khi kết hợp với Provider hoặc Riverpod, việc quản lý trạng thái trong Flutter trở nên đơn giản và hiệu quả hơn. Nếu bạn đang tìm kiếm một cách tiếp cận tốt hơn để phát triển ứng dụng Flutter, hãy thử áp dụng MVVM ngay hôm nay!

You need to login in order to like this post: click here