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.
