Trong quá trình phát triển một phần mềm di động có tính mở rộng cao, các nhà phát triển thường hay chọn cho mình một kiến trúc (State management) phù hợp để triển khai ứng dụng.

Hiện tại trong thế giới phát triển phần mềm cho di động, website, desktop… có rất nhiều các kiến trúc được các công ty, nhà phát triển đưa ra. Phổ biến như N-layer, MVP, MVVM…

Về phía Flutter củng không kém cạnh khi củng được Google và các bên thứ ba phát triển một số kiến trúc như là ScopeModel, Rxdart, Redux, MobX, BloC, Provider.

Provider là một package do cộng đồng phát triển, rất gần với Scope model nhưng đơn giản, mạnh mẽ hơn và được chính Google khuyến khích sử dụng.

Trong bài viết này (part-1), mình sẽ giới thiệu Provider cho Flutter App

Nội dung:

1. Pragmatic State Management sử dụng  Provider

Pragmatic State Management sử dụng Provider

Cài đặt Provider package vào flutter project

Vào trong file pubspec.yaml

Chạy lệnh “flutter pub get” để update các dependencies:

Page và Page Model

Mỗi một màn hình trong Flutter được định nghĩa là một page hoặc chúng ta củng có thể gọi là View.

Chúng ta sẽ sử dụng demo mặt định là đếm số của Flutter để chuyển đổi thành Provider.

Mặt định, chúng ta sẽ sử dụng setState để quản lý trạng thái của counter

Với cách sử dụng setState, việc quản lý các trạng thái và xử lý logic của các page sẽ trở nên phức tạp nếu cần phải quản lý nhiều làm cho code bị phình lên. Đồng thời, thu hẹp khả năng mở rộng của ứng dụng.

ChangeNotifier

ChangeNotifier là một lớp được tạo ra để thông báo các thay đổi bên trong nó bằng Voidcallback.

Tạo ra một file tên là counter_model.dart để quản lý trạng thái counter

Cho biến _counter thay đổi bằng hai hàm là incrementCounter và decrementCounter.

Các bạn đang thấy sự xuất hiện của hàm notifyListenners(). Hàm này được sử dụng cho Page nào lắng nghe model này biết rằng đã có sự thay đổi trạng thái mà nó đang quản lý và sau đó hàm build sẽ được gọi lại để thực hiện thay đổi widget đó.

Page chỉ bao gồm model và các widget

Tạo ra file couter_page.dart để xây dựng layout đó.

Chúng ta bắt đầu xây dựng Widget và việc lắng nghe model.

ChangeNotifierProvider và Consumer

ChangeNotifierProvider được sinh ra để lắng nghe ChangeNotifier. Các thành phần con sẽ được rebuild khi hàm notifyListener() ở ChangeNotifier được gọi.

Consumer là một widget cho phép bạn lấy ra được model mà bạn muốn từ phía ChangeNotifierProvider. Consumer rất hữu ích trong việc lấy ra model của đối tượng đó để quả lý nhất là được sử dụng trong children con của page. Mình sẽ có bài viết chi tết hơn về cách sử dụng này!

Vừa rồi, chúng ta đã xây dựng được layout cho page. Trong đoạn code phía trên, trong builder chúng ta có: builder: (context, model, child)

Model ở đây là đối tượng CounterModel chứa counter và các hàm xử lý. Thực hiện việc xử lý các event như sau:

Hiển thị giá trị:

Xử lý event

Kết quả: