Một ứng dụng “đóng kín” (Offline) sẽ rất hạn chế. Sức mạnh thực sự nằm ở việc kết nối Internet để lấy dữ liệu: Thời tiết, Tin tức, Giá vàng…

Trong Flutter, việc gọi API (Application Programming Interface) cực kỳ đơn giản nhờ các thư viện hỗ trợ tận răng. Bài viết này sẽ hướng dẫn bạn cách lấy dữ liệu từ một API miễn phí và hiển thị lên màn hình.

1. Chuẩn bị thư viện

Chúng ta có 2 sự lựa chọn phổ biến:
* http: Thư viện chính chủ của Google. Đơn giản, dễ dùng.
* dio: Thư viện bên thứ 3 mạnh mẽ hơn (có Interceptor, Cancel Token…).

Trong bài này, mình sẽ dùng gói http cho đơn giản.
Thêm vào file pubspec.yaml:

dependencies:
  http: ^1.1.0

2. Quy trình “3 bước” để lấy dữ liệu

Bước 1: Gọi API (Fetch Data)

Sử dụng hàm http.get() để gửi yêu cầu lên Server. Vì việc này tốn thời gian (mạng lag), nên chúng ta phải dùng async/await.

Bước 2: Giải mã JSON (Parse JSON)

Server trả về một chuỗi String loằng ngoằng. Bạn cần dùng jsonDecode() để biến nó thành Map (Key-Value) hoặc Object trong Dart.

Bước 3: Hiển thị lên UI (FutureBuilder)

Dùng Widget FutureBuilder để xử lý 3 trạng thái:
* Đang tải (Loading) -> Hiện vòng quay.
* Lỗi (Error) -> Hiện thông báo lỗi.
* Thành công (Success) -> Hiện dữ liệu.

3. Code mẫu đầy đủ

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

Future<List<dynamic>> fetchPosts() async {
  final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));
  if (response.statusCode == 200) {
    return jsonDecode(response.body);
  } else {
    throw Exception('Failed to load posts');
  }
}

class PostList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<dynamic>>(
      future: fetchPosts(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(snapshot.data![index]['title']),
              );
            },
          );
        } else if (snapshot.hasError) {
          return Text("${snapshot.error}");
        }
        return CircularProgressIndicator();
      },
    );
  }
}

Lấy dữ liệu về rồi, nhưng nếu người dùng tắt mạng thì sao? App sẽ trắng trơn à?
Giải pháp là lưu dữ liệu vào máy (Cache) để xem offline.

Bài tiếp theo sẽ hướng dẫn bạn cách Lưu dữ liệu local trong Flutter bằng SharedPreferences và SQLite.

👉 Lưu dữ liệu local trong Flutter: SharedPreferences & SQLite

Đón xem bài tiếp theo: Lưu dữ liệu local trong Flutter: Khi nào dùng cái nào?**

Thành ĐT

Founder & Chief Technology Officer, HNDL

1.320 Bài viết

15.4k Người theo dõi

120k+ Lượt đọc

Chuyên gia với hơn 10 năm kinh nghiệm trong phát triển hệ thống giao dịch tự động (Trading Bot), Fintech, Mobile App và phân tích dữ liệu tài chính (Quantitative Analysis). Người sáng lập và trực tiếp dẫn dắt các khóa học thực chiến tại Hướng Nghiệp Dữ Liệu.

Theo dõi Liên hệ Zalo