Làm việc với dữ liệu bất đồng bộ trong Flutter – Future, Async và FutureBuilder

Chào mọi người! Chúng ta lại tiếp tục hành trình học Flutter từ con số 0 nhé 😄

Trong những bài trước, chúng ta đã làm quen với các giao diện cơ bản, navigation, form, danh sách, hình ảnh… và hôm nay sẽ bước sang một phần rất quan trọng: Dữ liệu bất đồng bộ (asynchronous data).

Flutter là framework dành cho UI, nhưng các app thực tế luôn cần tương tác với dữ liệu như:

• Gọi API lấy danh sách người dùng
• Tải ảnh từ mạng
• Đọc file từ máy

Tất cả những thao tác đó đều không xảy ra ngay lập tức, và ta cần quản lý chúng đúng cách bằng Future, async/await, và FutureBuilder.

Future là gì?

Một Future đại diện cho giá trị sẽ có trong tương lai (chưa có ngay lúc này).

Ví dụ như khi chúng ta gọi API lấy dữ liệu người dùng, ta đâu có kết quả ngay lập tức? Ta cần chờ một chút → lúc đó ta dùng Future.

Future<String> fetchData() async { await Future.delayed(Duration(seconds: 2)); return "Dữ liệu từ server";
}

Sử dụng async/await để xử lý

void getData() async { String result = await fetchData(); print(result);
}

Khi gọi await, Flutter chờ đến khi có kết quả rồi mới tiếp tục dòng tiếp theo → giúp code dễ đọc và dễ hiểu hơn so với callback.

FutureBuilder – Hiển thị dữ liệu khi load xong

Trong Flutter, nếu chúng ta muốn hiển thị UI theo trạng thái dữ liệu, như:

• Đang tải
• Thành công
• Lỗi thì FutureBuilder chính là công cụ tuyệt vời.

Ví dụ đơn giản

import 'package:flutter/material.dart'; void main() { runApp(MaterialApp(home: FutureExample()));
} class FutureExample extends StatelessWidget { Future<String> fetchData() async { await Future.delayed(Duration(seconds: 2)); return "Xin chào từ server!"; } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text('FutureBuilder Demo')), body: Center( child: FutureBuilder<String>( future: fetchData(), builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.waiting) { return CircularProgressIndicator(); // Đang loading } else if (snapshot.hasError) { return Text("Lỗi: ${snapshot.error}"); } else { return Text("Kết quả: ${snapshot.data}"); } }, ), ), ); }
}

Kết luận

• Future dùng để xử lý các thao tác bất đồng bộ như gọi API, đọc file.
• async/await giúp code dễ hiểu và tuần tự.
• FutureBuilder giúp hiển thị UI theo trạng thái dữ liệu.

Qua bài hôm nay, mình cảm thấy việc xử lý dữ liệu bất đồng bộ trong Flutter không quá phức tạp nếu nắm được bản chất của Future và sử dụng async/await đúng cách.

Nếu trong bài có phần nào chưa rõ hoặc sai sót, mình rất mong mọi người góp ý để hoàn thiện hơn nhé 🙏

Chúc tất cả chúng ta kiên trì học mỗi ngày và sớm tự tay xây được ứng dụng Flutter đầu tiên!

Hẹn gặp lại ở bài viết tiếp theo 😄