Trong phần này, chúng ta sẽ tìm hiểu cách chúng ta có thể truy cập API REST trong ứng dụng Flutter. Ngày nay, hầu hết các ứng dụng sử dụng dữ liệu từ xa bằng API. Vì vậy, phần này sẽ là phần quan trọng cho những nhà phát triển muốn tạo nhà cung cấp dịch vụ của họ trong Flutter.
Flutter cung cấp gói http để sử dụng tài nguyên http. Gói http sử dụng các tính năng await và async và cung cấp nhiều phương thức cấp cao như phương thức read, get, post, put, head, and delete và nhận dữ liệu từ các vị trí từ xa. Các phương pháp này đơn giản hóa việc phát triển các ứng dụng di động dựa trên REST.
Giải thích chi tiết về các phương thức cốt lõi của gói http như sau:
Read: Phương thức này được sử dụng để đọc hoặc truy xuất biểu diễn của các tài nguyên. Nó yêu cầu url được chỉ định bằng cách sử dụng phương thức get và trả về phản hồi là Future <Chuỗi>.
Get: Phương thức này yêu cầu url được chỉ định từ phương thức get và trả về một phản hồi là Future <response>. Ở đây, phản hồi là một lớp, chứa thông tin phản hồi.
Post: Phương pháp này được sử dụng để gửi dữ liệu đến các tài nguyên được chỉ định. Nó yêu cầu url được chỉ định bằng cách đăng dữ liệu đã cho và trả về phản hồi dưới dạng Future <response>.
Put: Phương pháp này được sử dụng cho khả năng cập nhật. Nó cập nhật tất cả các biểu diễn hiện tại của tài nguyên đích với các payloads. Phương thức này yêu cầu url được chỉ định và trả về phản hồi là Future <response > .
Head: Nó tương tự như phương thức Get, nhưng không có phần thân phản hồi.
Delete: Phương pháp này được sử dụng để loại bỏ tất cả các tài nguyên được chỉ định.
Gói http cũng cung cấp một lớp client http tiêu chuẩn hỗ trợ kết nối liên tục. Lớp này hữu ích khi có nhiều yêu cầu được thực hiện trên một máy chủ cụ thể. Nó phải được đóng đúng cách bằng cách sử dụng phương thức close(). Nếu không, nó hoạt động như một lớp http. Đoạn mã sau đây giải thích rõ ràng hơn.
var client = new http.Client();
try {
print(await client.get('https://www.cafedev.vn/'));
}
finally {
client.close();
} Để tìm nạp dữ liệu từ internet, bạn cần làm theo các bước cần thiết sau:
Bước 1: Cài đặt gói http mới nhất và thêm nó vào dự án.
Để cài đặt gói http, hãy mở tệp pubspec.yaml trong thư mục dự án của bạn và thêm gói http vào phần phụ thuộc . Bạn có thể tải gói http mới nhất tại đây và thêm nó như:
dependencies:
http: <latest_version> Bạn có thể nhập gói http dưới dạng:
import 'package:http/http.dart' as http; Bước 2: Tiếp theo, thực hiện yêu cầu mạng bằng gói http.
Trong bước này, bạn cần thực hiện yêu cầu mạng bằng cách sử dụng phương thức http.get ()
Future<http.Response> fetchPost() {
return http.get('https://jsonplaceholder.typicode.com/posts/1');
} Trong đoạn code trên, Tương lai là một lớp có chứa một đối tượng. Đối tượng đại diện cho một giá trị hoặc lỗi tiềm ẩn.
Bước 3: Bây giờ, chuyển đổi phản hồi nhận được từ yêu cầu mạng thành đối tượng Dart tùy chỉnh.
Đầu tiên, bạn cần tạo một lớp Post . Lớp Post đã nhận dữ liệu từ yêu cầu mạng và bao gồm một phương thức khởi tạo gốc, tạo ra Post từ JSON. Bạn có thể tạo một lớp Đăng như bên dưới:
class Post {
final int userId;
final int id;
final String title;
final String body;
Post({this.userId, this.id, this.title, this. description});
factory Post.fromJson(Map<String, dynamic> json) {
return Post(
userId: json['userId'],
id: json['id'],
title: json['title'],
description: json['description'],
);
}
} Bây giờ, bạn phải chuyển đổi http.response thành Bài đăng. Đoạn code sau cập nhật hàm fetchPost () để trả về một <Post> trong tương lai.
Future<Post> fetchPost() async {
final response = await http.get( Give the link of JSON file');
if (response.statusCode == 200) {
// If the server returns an OK response, then parse the JSON.
return Post.fromJson(json.decode(response.body));
} else {
// If the response was umexpected, throw an error.
throw Exception('Failed to load post');
}
} Bước 4: Bây giờ, tìm nạp dữ liệu bằng Flutter. Bạn có thể gọi phương thức tìm nạp trong initState () . Đoạn mã sau giải thích cách bạn có thể tìm nạp dữ liệu.
class _MyAppState extends State<MyApp> {
Future<Post> post;
@override
void initState() {
super.initState();
post = fetchPost();
}
Bước 5: Cuối cùng, hiển thị dữ liệu. Bạn có thể hiển thị dữ liệu bằng cách sử dụng tiện ích con FutureBuilder . Tiện ích này có thể hoạt động dễ dàng với các nguồn dữ liệu không đồng bộ.
FutureBuilder<Post>(
future: post,
builder: (context, abc) {
if (abc.hasData) {
return Text(abc.data.title);
} else if (abc.hasError) {
return Text("${abc.error}");
}
// By default, it show a loading spinner.
return CircularProgressIndicator();
},
); Hãy để chúng tôi xem mã hoàn chỉnh để hiểu cách Flutter hoạt động với REST API để tìm nạp dữ liệu từ mạng. Bạn có thể tìm hiểu thêm chi tiết từ đây .
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
MyApp({Key key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
Future<Post> post;
@override
void initState() {
super.initState();
post = fetchPost();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter REST API Example',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: Scaffold(
appBar: AppBar(
title: Text('Flutter REST API Example'),
),
body: Center(
child: FutureBuilder<Post>(
future: post,
builder: (context, abc) {
if (abc.hasData) {
return Text(abc.data.title);
} else if (abc.hasError) {
return Text("${abc.error}");
}
// By default, it show a loading spinner.
return CircularProgressIndicator();
},
),
),
),
);
}
}
Future<Post> fetchPost() async {
final response = await http.get('Give your JSON file web link.');
if (response.statusCode == 200) {
// If the call to the server was successful (returns OK), parse the JSON.
return Post.fromJson(json.decode(response.body));
} else {
// If that call was not successful (response was unexpected), it throw an error.
throw Exception('Failed to load post');
}
}
class Post {
final int userId;
final int id;
final String title;
final String description;
Post({this.userId, this.id, this.title, this. description});
factory Post.fromJson(Map<String, dynamic> json) {
return Post(
userId: json['userId'],
id: json['id'],
title: json['title'],
description: json[' description'],
);
}
} Json:
[
{
"userId": 01,
"id": 1,
"title": "iPhone",
"description": "iPhone is the very stylist phone ever"
},
{
"userId": 02,
"id": 2,
"title": "Pixel",
"description": "Pixel is the most feature phone ever"
},
{
"userId": 03,
"id": 3,
"title": "Laptop",
"description": "Laptop is most popular development tool"
},
{
"userId": 04,
"id": 4,
"title": "Tablet",
"description": "Tablet is the most useful device used for meeting"
}
] Cài ứng dụng cafedev để dễ dàng cập nhật tin và học lập trình mọi lúc mọi nơi tại đây.
Tài liệu từ cafedev:
- Full series tự học Flutter từ cơ bản tới nâng cao tại đây nha.
- Các nguồn kiến thức MIỄN PHÍ VÔ GIÁ từ cafedev tại đây
Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:
Chào thân ái và quyết thắng!
