Skip to main content

Kết Nối API RESTful trong Flutter: Hướng Dẫn Chi Tiết

· 5 min read

Kết nối API RESTful là một kỹ năng quan trọng trong phát triển ứng dụng di động, đặc biệt là khi bạn cần tương tác với các dịch vụ backend để lấy dữ liệu hoặc thực hiện các thao tác CRUD (Create, Read, Update, Delete). Trong bài viết này, chúng ta sẽ tìm hiểu cách kết nối API RESTful trong Flutter bằng thư viện http và dio. Flutter

1. Giới Thiệu về RESTful API​

REST (Representational State Transfer) là một kiến trúc phần mềm được sử dụng rộng rãi để thiết kế các hệ thống mạng, đặc biệt là các ứng dụng web. RESTful API là các API tuân thủ các nguyên tắc của REST.

Các phương thức HTTP phổ biến trong RESTful API:

  • GET: Lấy dữ liệu từ server.
  • POST: Gửi dữ liệu mới lên server.
  • PUT: Cập nhật dữ liệu đã có trên server.
  • DELETE: Xóa dữ liệu trên server.

2. Kết Nối API RESTful với Thư Viện http​

Thư viện http là một thư viện đơn giản và phổ biến trong Flutter để thực hiện các yêu cầu HTTP. Dưới đây là các bước để kết nối API RESTful với thư viện http.

Bước 1: Thêm Thư Viện http vào Project​

Thêm thư viện http vào file pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3
Bước 2: Gọi API với Phương Thức GET
Dưới đây là ví dụ về cách gọi API với phương thức GET để lấy dữ liệu từ server:

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

class GetDataExample extends StatefulWidget {
  @override
  _GetDataExampleState createState() => _GetDataExampleState();
}

class _GetDataExampleState extends State<GetDataExample> {
  List<dynamic> data = [];

  Future<void> fetchData() async {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));

    if (response.statusCode == 200) {
      setState(() {
        data = json.decode(response.body);
      });
    } else {
      throw Exception('Failed to load data');
    }
  }

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fetch Data Example'),
      ),
      body: ListView.builder(
        itemCount: data.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(data[index]['title']),
            subtitle: Text(data[index]['body']),
          );
        },
      ),
    );
  }
}
Bước 3: Gọi API với Phương Thức POST
Dưới đây là ví dụ về cách gọi API với phương thức POST để gửi dữ liệu lên server:

dart
Copy
Future<void> postData() async {
  final response = await http.post(
    Uri.parse('https://jsonplaceholder.typicode.com/posts'),
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'title': 'foo',
      'body': 'bar',
      'userId': '1',
    }),
  );

  if (response.statusCode == 201) {
    print('Data posted successfully');
  } else {
    throw Exception('Failed to post data');
  }
}
3. Kết Nối API RESTful với Thư Viện dio
Thư viện dio là một thư viện mạnh mẽ hơn so với http, hỗ trợ nhiều tính năng nâng cao như interceptors, timeout, retry request, và hỗ trợ upload file. Dưới đây là các bước để kết nối API RESTful với thư viện dio.

Bước 1: Thêm Thư Viện dio vào Project
Thêm thư viện dio vào file pubspec.yaml:

yaml
Copy
dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.0
Bước 2: Gọi API với Phương Thức GET
Dưới đây là ví dụ về cách gọi API với phương thức GET bằng dio:

dart
Copy
import 'package:dio/dio.dart';

Future<void> fetchDataWithDio() async {
  final dio = Dio();
  final response = await dio.get('https://jsonplaceholder.typicode.com/posts');

  if (response.statusCode == 200) {
    print(response.data);
  } else {
    throw Exception('Failed to load data');
  }
}
Bước 3: Gọi API với Phương Thức POST
Dưới đây là ví dụ về cách gọi API với phương thức POST bằng dio:

dart
Copy
Future<void> postDataWithDio() async {
  final dio = Dio();
  final response = await dio.post(
    'https://jsonplaceholder.typicode.com/posts',
    data: {
      'title': 'foo',
      'body': 'bar',
      'userId': '1',
    },
  );

  if (response.statusCode == 201) {
    print('Data posted successfully');
  } else {
    throw Exception('Failed to post data');
  }
}
4. Xử Lý Lỗi và Hiển Thị Thông Báo
Khi kết nối API, việc xử lý lỗi là rất quan trọng để đảm bảo ứng dụng của bạn hoạt động ổn định. Dưới đây là cách xử lý lỗi và hiển thị thông báo cho người dùng:

dart
Copy
Future<void> fetchData() async {
  try {
    final response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts'));

    if (response.statusCode == 200) {
      setState(() {
        data = json.decode(response.body);
      });
    } else {
      throw Exception('Failed to load data');
    }
  } catch (e) {
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text('Error'),
        content: Text('Failed to load data: $e'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text('OK'),
          ),
        ],
      ),
    );
  }
}
5. Kết Luận
Kết nối API RESTful là một kỹ năng quan trọng trong phát triển ứng dụng di động với Flutter. Bằng cách sử dụng các thư viện như http và dio, bạn có thể dễ dàng tương tác với các dịch vụ backend để lấy dữ liệu, gửi dữ liệu, và thực hiện các thao tác CRUD. Trong khóa học Flutter Level 3 của chúng tôi, bạn sẽ được học cách kết nối API RESTful một cách chuyên sâu, cùng với các kỹ thuật nâng cao như authentication, phân trang, và bảo mật API.