Flutter tutorial – 2.10 Lập trình bất đồng bộ với Stream và cách dùng StreamBuilder

Trong bài viết trước về lập trình bất đồng bộ trong ngôn ngữ Dart, Báo Flutter đã gửi đến các bạn thế nào là lập trình bất đồng bộ và cách triển khai với các từ khoá Future, async, await… Trong bài viết này cũng là chủ đề về lập trình bất đồng bộ nhưng sử dụng Stream.

Stream là gì ?

Stream là một chuỗi asynchronous data ví dụ như : các event từ người dùng hay chuỗi dữ liệu được đọc từ file.
Ví dụ :

Stream được sử dụng trong lập trình bất đồng bộ khi đọc, ghi lấy dữ liệu từ Server, database và các file.

Để xử lý một Stream chúng ta có thể dùng hai phương thức đó là : await for và listen().

Stream có hai loại: single subscription và broadcast

+ Single Subscription : Chỉ có tối đa một listener dùng cho một Stream.
+ Broadcast: Có nhiều listener để xử lý một Stream

Dùng Stream như thế nào ?
Tạo ra một Stream :

stream_methods có thể là : periodic, take, takeWhile, skip, skipWhile, toList, forEach,

Thực ra có nhiều cách để thao tác với Stream nhưng trong bài viết này Báo Flutter sẽ chia thành hai cách, đó là : Dùng await for và dùng listener

* Dùng await for

Mở DartPad và chạy thử đoạn code bên dưới:

Kết quả của chương trình trên là dòng số cứ sau 3s sẽ xuất hiện một số và không dừng.
Từ ví dụ trên các bạn đã biết cách tạo một stream và xử lý stream đó với việc sử dụng await for .

* Dùng listen
Cũng tương tự như await for nhưng chỉ khác là dùng hàm listen để lắng nghe stream và xử lý dữ liệu trong stream.
Vẫn sử dụng ví dụ trên, các bạn đọc và chạy thử chương trình bên dưới, các bạn sẽ biết cách dùng listen với stream:

Kết quả cũng tương tự như khi dùng await for.

StreamBuilder

– StreamBuilder là một widget trong Flutter, dùng để đọc dữ liệu từ Stream và xây dựng phần logic cho UI.

Cách dùng StreamBuilder

StreamBuilder gồm 2 phần chính :
+ stream: là một stream asynchronous data – chúng ta đã biết ở phần trên
+ builder: xây dựng logic cho UI

Xem ví dụ dưới đây để hiểu cơ bản về cách dùng StreamBuilder, khi xây dựng ứng dụng và trong một trường hợp cụ thể bạn có thể hiểu rõ hơn:

1. Tạo Stream

2. Dùng StreamBuilder để xử lý data từ stream và xây dựng phần logic cho UI

Chúc 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 *