Nghệ thuật Flutter: Kiến trúc Bloc và sử dụng BlocProvider

BloC (Business Logic Controller)
Được tạo bởi Google và ra mắt 2018, được viết dựa trên Stream và Reactive Programing.

Kiến trúc Bloc

Về kiến trúc Bloc trong Flutter, có hai dạng mà bạn thường gặp đó là :
+ Xây dựng Bloc với RxDart
+ Xây dựng BLoC với Event – State

Nhưng dù dùng kiểu nào đi nữa, thì cấu trúc cũng theo một mô hình như bên dưới:

Trong kiến trúc BloC, chia làm 4 layers chính là : UI, BloC, Respository, DataSources:

• UI (User Interface ) : Là những phần của Ứng dụng để hiển thị với người dùng.
• BloC: Luôn lắng nghe các sự kiện pass qua nó, ví dụ luôn lắng nghe data pass qua stream.
• Repository : Dùng để fetching data từ Data sources. Đầu ra của lớp này sẽ là đầu vào của khối Bloc, khi đó data sẽ được đặt trong các Stream
• Data Sources: Là khối cung cấp data cho ứng dụng như network, sqflite, shared_preferences

Xây dựng BLoC với Stream

– Trong kiểu kiến trúc này thì Bloc được tạo ra cùng với RxDart với các khái niệm như Stream, Sink.
Kiểu kiến trúc này thường được dùng với RestAPI.
Để hiểu hơn về các dùng này bạn có thể xem lại bài viết có hướng dẫn cụ thể của tôi về REST API.

Xây dựng BLoC với Event-State

Cấu trúc BLoC dạng này như bên dưới :

* Events là những sự kiện được gửi từ UI như : touch, nhấn nút.. . Events này sẽ được tiếp nhận bởi khối BloC.
* States là những trạng thái được gửi lên bởi khối Bloc, khi nhận được State thì UI sẽ thay đổi theo các State đó.
* Transition : Thể hiện sự thay đổi state, nó bao gồm : current State, next State, event

Khi xây dựng kiến trúc Bloc theo kiểu event – state; bạn cần nhớ :
+ Một Bloc được tạo ra từ việc kế thừa class Bloc của bloc package
+ Bloc phải được khai báo state ban đầu : initial State
+ Khi tạo bloc với sự kế thừa Bloc của Bloc package, bạn cần implement function mapEventToState, với tham số là event , đầu ra là stream của state.
+ Sử dụng thuộc tính currentState để truy cập current state.
+ Mỗi bloc cần phải có thuộc tính dispatch, hàm dispatch nhận event , trigger mapEventToState. Dispatch có vai trò như lớp presentation
+ hàm onTransition được gọi trước khi update state bloc
+ Để bắt exception của bloc , chúng ta có thể override hàm onError

Các bước tạo một khối bloc và sử dụng bloc:
+ Tạo Events
+ Tạo State
+ Tạo Bloc
+ Tạo Bloc Provider
+ Sử dụng Bloc với state, event

Bạn có thể tham khảo ví dụ : login, trong bloclibrary.dev để hiểu hơn.

Khai báo thư viện như bloc, flutter_bloc:

Tạo Events

Trong Authentication:

Về Login Event:

Tạo State
Trong Authentication:

Tạo State trong Login

Tạo BLoC
Trong Authentication:

Tạo khối BLoC trong Login:

Sử dụng BlocProvider

BlocProvider được sử dụng dựa trên Provider, Bạn có thể tham khảo cách dùng như bên dưới :

hoặc :

Tham khảo example: Login của bloclibrary để biết thêm.

Như vậy, các bạn đã biết kiến trúc Bloc và biết sơ qua về kiến trúc Bloc event-state.
Hi vọng các bạn có được nhiều kiến thức từ Báo Flutter.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *