Kiến trúc ứng dụng MVC Flutter – MVC Pattern
Kiến trúc MVC Flutter là một trong những Design Pattern được dùng trong quá trình thiết kế ứng dụng di động Flutter cũng như xây dựng phần mềm nói chung.
Ngoài MVC Pattern trong Flutter cũng có những mô hình kiến trúc khác như MVP, MVVM. Tuy nhiên, trong Flutter cũng có những mô hình kiến trúc riêng của Flutter như : BLoC, Redux, FishRedux, những kiến trúc này cũng áp dụng các kiến trúc đã có trước đó như MVC, MVP, MVVM.
MVC (Model View Controller)
Model
Trong kiến trúc MVC trong Flutter hay kiến trúc MVP, MVVM, thì model đều có định nghĩa tương tự nhau.
Model nghĩa là các dữ liệu cần thiết để hiển thị ở View. Model đại diện cho một tập hợp các lớp mô tả business logic (business model và data model).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
class UserInformation { int? id; String? username; String? address; UserInformation({required this.id, required this.username,required this.address}); factory UserInformation.fromJson(json) { return UserInformation( id: json['id'], username:json['username'] , address: json['address']); } toJson(){ return { "id": this.id, "username": this.username, "address": this.address }; } } |
View
View đại diện cho các thành phần UI, View sẽ hiển thị dữ liệu đã qua xử lý từ Controller. Model và View tương tác với nhau qua Observer pattern.
Controller
Controller có trách nhiệm xử lý các yêu cầu (request) được gửi đến. Nó sẽ xử lý các dữ liệu của người dùng qua Model và trả về kết quả ở View.
Triển khai MVC trong Flutter
Để triển khai kiến trúc này, chúng ta có thể tự xây dựng cấu trúc MVC hoặc sử dụng thư viện đã có sẵn.
• Có nhiều thư viện hỗ trợ kiểu kiến trúc này như : momentum, mvc_pattern, mvc_application.
Trong bài viết này, Báo Flutter sẽ sử dụng thư viện momentum:
Cài đặt thư viện:
Đầu tiên, khai báo thư viện mới nhất, trong pubspec.yaml: momentum: ^2.1.1
Tạo các folder trong project như hình:
1. Tạo Model trong folder : models
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import 'package:momentum/momentum.dart'; import 'package:mvc/controllers/counter_controller.dart'; class CounterModel extends MomentumModel<CounterController> { CounterModel( CounterController controller, { this.value, }) : super(controller); final int? value; @override void update({ int? value, }) { CounterModel( controller, value: value ?? this.value, ).updateMomentum(); } } |
2. Tạo Controller trong folder: controllers
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
import 'package:momentum/momentum.dart'; import 'package:mvc/models/counter_model.dart'; class CounterController extends MomentumController<CounterModel> { @override CounterModel init() { return CounterModel( this, value: 0, ); } void increment() { var value = model.value; // grab the current value model.update(value: value! + 1); // update state (rebuild widgets) print(model.value); // new or updated value } } |
3. Hiển thị lên View trong folder: views
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
import 'package:flutter/material.dart'; import 'package:momentum/momentum.dart'; import 'package:mvc/controllers/counter_controller.dart'; import 'package:mvc/models/counter_model.dart'; class HomeWidget extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Tăng số'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'Nhấn nút bên dưới để tăng giá trị biến đếm: ', ), MomentumBuilder( controllers: [CounterController], builder: (context, snapshot) { var counter = snapshot<CounterModel>(); return Text( '${counter.value}', style: Theme.of(context).textTheme.headline4, ); }, ), ], ), ), // we don't need to rebuild the increment button, we can skip the MomentumBuilder floatingActionButton: FloatingActionButton( onPressed: Momentum.controller<CounterController>(context).increment, tooltip: 'Increment', child: Icon(Icons.add), ), ); } } |
Source code => Link Github
Kiến trúc MVC trong lập trình Flutter cũng như MVP, MVVM là những kiến thức căn bản trong ngành lập trình phần mềm. Rất mong các bạn đọc tiếp những bài viết về MVP, MVVM trong mục Kiến trúc ứng dụng Flutter.
Cảm ơn bạn đã theo dõi Báo Flutter.
