|
| Cách Tích Hợp API vào Flutter để Xây Dựng Ứng Dụng Thực Tế |
Kết nối ứng dụng Flutter với API là kỹ năng quan trọng để xây dựng ứng dụng thực tế. Bài viết này hướng dẫn bạn gọi API REST, xử lý dữ liệu, và hiển thị kết quả, phù hợp cho người học lập trình Flutter.
Bước 1: Cài Đặt Package Http
Thêm package:
flutter pub add http
Bước 2: Gọi API REST
Lấy dữ liệu từ API:
Future<List<dynamic>> fetchData() async {
final response = await http.get(Uri.parse('https://api.example.com/products'));
if (response.statusCode == 200) {
return jsonDecode(response.body);
} else {
throw Exception('Failed to load data');
}
}
Thủ thuật: Kiểm tra statusCode để xử lý lỗi.
Bước 3: Hiển Thị Dữ Liệu với FutureBuilder
Hiển thị danh sách sản phẩm:
FutureBuilder(
future: fetchData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data!.length,
itemBuilder: (context, index) => ListTile(
title: Text(snapshot.data![index]['name']),
),
);
} else if (snapshot.hasError) {
return Text("Error: ${snapshot.error}");
}
return CircularProgressIndicator();
},
)
Thủ thuật: Dùng CircularProgressIndicator khi tải dữ liệu.
Bước 4: Cache Dữ Liệu
Dùng flutter_cache_manager:
final cache = DefaultCacheManager();
cache.putFile('key', response.bodyBytes);
Thủ thuật: Cache dữ liệu để giảm tải API.
Kết luận
Tích hợp API vào Flutter giúp bạn xây dựng ứng dụng thực tế dễ dàng. Muốn học cách kết nối backend và phát triển dự án lớn? Tham gia khóa học Flutter dự án thực tế tại Devrun ngay hôm nay!