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ụ :
|
1 2 |
Stream<int> // một chuỗi các dữ liệu kiểu int Stream<String> // một chuỗi các dữ liệu kiểu String |
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 :
|
1 |
Stream < kieu_du_lieu > ten_stream = Stream<kieu_du_lieu>.stream_methods |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
main() async { // Tạo thời gian trễ Duration delayTime = Duration(seconds: 3); // Tạo Stream kiểu dữ liệu int, sau delayTime sẽ tạo ra một số trong Stream Stream <int> stream = Stream<int>.periodic(delayTime, makeNumber); // chờ trong stream và đọc dữ liệu từ stream đó await for (int i in stream) { print(i); } } // value bắt đầu từ 0 int makeNumber(int value) => (value +1); |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
main() async { // Tạo thời gian trễ Duration delayTime = Duration(seconds: 3); // Tạo Stream kiểu dữ liệu int, sau delayTime sẽ tạo ra một số trong Stream Stream <int> stream = Stream<int>.periodic(delayTime, makeNumber); // Lắng nghe trong stream hiển thị lên màn hình các số trong stream stream.listen((x){ print(x); }); } // value bắt đầu từ 0 int makeNumber(int value) => (value +1); |
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
|
1 2 3 4 5 6 7 |
Stream<int> stream() { Duration delayTime = Duration(seconds: 3); Stream<int> stream = Stream<int>.periodic(interval, makeNumber); return stream; } int makeNumber(int value) => (value + 1); |
2. Dùng StreamBuilder để xử lý data từ stream và xây dựng phần logic cho UI
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
child: StreamBuilder( // Xây dựng phần logic cho UI - builder builder: (BuildContext context, AsyncSnapshot<int> snapshot) { if (snapshot.connectionState == ConnectionState.done) { return Text( 'Hoàn thành điều kiện 1' ), ); } else if (snapshot.connectionState == ConnectionState.waiting) { return Text( 'Hoàn thành điều kiện 2' ); } return Text( 'Giá trị mặc định', ); }, initialData: 0, // đầu vào là stream stream: stream(), ), ), ); } |
Chúc các bạn có được nhiều kiến thức từ Báo Flutter !
