Lập trình app Flutter kết nối mạng HTTP với RestAPI, xử lý JSON data

Trong thế giới phát triển ứng dụng hiện đại, việc kết nối và trao đổi dữ liệu giữa ứng dụng và máy chủ gần như là yêu cầu bắt buộc. Với Flutter – framework phát triển ứng dụng đa nền tảng mạnh mẽ của Google, việc tích hợp mạng, gọi API và xử lý dữ liệu JSON không chỉ cần thiết mà còn là bước nền tảng để xây dựng các ứng dụng thực tế, từ mạng xã hội đến thương mại điện tử.

Bài viết này sẽ hướng dẫn chi tiết cách kết nối HTTP, xử lý JSON và tổ chức code một cách chuyên nghiệp, giúp bạn làm chủ luồng dữ liệu mạng trong Flutter.

1. Tổng quan luồng kết nối giữa Flutter và API

Khi ứng dụng Flutter cần lấy dữ liệu từ máy chủ (server), quy trình cơ bản sẽ diễn ra như sau:

• Gửi một yêu cầu (HTTP request) đến API.
• Nhận lại phản hồi từ máy chủ dưới dạng JSON.
• Giải mã dữ liệu JSON thành các đối tượng Dart.
• Sử dụng dữ liệu đó để cập nhật UI.

Với Flutter, thư viện http là lựa chọn phổ biến để thực hiện các thao tác HTTP một cách nhanh chóng.

2. Thêm thư viện HTTP

Thêm vào pubspec.yaml:

dependencies:  

  http: ^0.13.6

Sau đó, chạy:

 flutter pub get

3. Gửi HTTP Request và nhận dữ liệu

Ví dụ gọi đến API trả về danh sách người dùng:

import 'package:http/http.dart' as http;

import 'dart:convert';

Future<List<User>> fetchUsers() async {

    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/users'));

    if (response.statusCode == 200) {

       final List<dynamic> jsonData = json.decode(response.body);

       return jsonData.map((item) => User.fromJson(item)).toList();

} else {

       throw Exception('Failed to load users');

 }

}

4. Xử lý JSON và tạo Model

Khi dữ liệu trả về từ API là JSON, bạn cần chuyển đổi nó thành các class Dart để dễ dàng sử dụng.

Ví dụ với dữ liệu người dùng:

{  

  "id": 1,  

  "name": "Leanne Graham",  

  "email": "leanne@example.com"

}

Tạo class User:

class User {

 final int id;

 final String name;

 final String email;

User({required this.id, required this.name, required this.email});

factory User.fromJson(Map<String, dynamic> json) {

return User(

     id: json['id'],

     name: json['name'],

           email: json['email'],

  );

 }

}

5. Hiển thị dữ liệu trong UI

Kết hợp FutureBuilder để gọi API và cập nhật giao diện:

class UserListScreen extends StatelessWidget {

 const UserListScreen({Key? key}) : super(key: key);

@override Widget build(BuildContext context) {

return Scaffold(

  appBar: AppBar(title: Text('Danh sách người dùng')),

  body: FutureBuilder<List<User>>(

   future: fetchUsers(),

   builder: (context, snapshot) {

    if (snapshot.connectionState == ConnectionState.waiting) {

      return Center(child: CircularProgressIndicator());

    } else if (snapshot.hasError) {

        return Center(child: Text('Lỗi: ${snapshot.error}'));

    } else if (!snapshot.hasData || snapshot.data!.isEmpty) {

       return Center(child: Text('Không có dữ liệu'));

    }

    final users = snapshot.data!;

       return ListView.builder(

     itemCount: users.length,

     itemBuilder: (context, index) {

      final user = users[index];

      return ListTile( title: Text(user.name),

      subtitle: Text(user.email),

       );

     },

    );

    },

   ),

  );

 }

}

6. Lời khuyên khi xử lý mạng trong Flutter

Tách riêng tầng dữ liệu: Sử dụng mô hình như Repository để quản lý gọi API.

Sử dụng thư viện như Dio khi dự án phức tạp hơn: Hỗ trợ interceptor, logging, và token.

Xử lý lỗi và timeout rõ ràng: Không để ứng dụng treo khi không có internet.

Dùng json_serializable để tự động hoá việc mapping JSON → Dart.

Kết luận

Việc làm chủ kỹ thuật kết nối HTTP và xử lý JSON là bước chuyển mình giúp bạn từ lập trình giao diện cơ bản sang xây dựng những ứng dụng Flutter chuyên nghiệp, có thể tích hợp với backend, API, và hệ thống thực tế.

Nếu bạn đang ở giai đoạn muốn đưa kỹ năng Flutter lên cấp độ thực chiến, đây chính là nội dung bạn cần nắm thật vững. Đừng chỉ dừng lại ở lý thuyết – hãy thực hành, viết API riêng, tự xây dựng mô hình dữ liệu, và đưa ứng dụng của bạn chạm tới người dùng thật.

Nếu bạn cảm thấy bài viết này giúp bạn hiểu sâu hơn về kết nối mạng trong Flutter, thì chương trình khoá học "Lập trình Flutter toàn tập" chuyên sâu đang chờ bạn với các nội dung:

• Gọi API phức tạp có token, refresh token
• Pagination, filter, upload file
• Tích hợp mạng vào state management như Bloc hoặc Riverpod
• Kiến trúc clean và chuyên nghiệp cho ứng dụng Flutter kết nối backend

Bạn học để làm ra sản phẩm, không chỉ để hiểu lý thuyết.

Địa chỉ: Trung tâm CodeFresher – Số 104 Hoàng Ngân, Cầu Giấy, Hà Nội.

SĐT: Ms Nga – 0968089175 , Ms Diệu – 0332026803 (zalo/call)