Trong hầu hết các app hiện nay việc lấy dữ liệu từ server hay data base là việc hết sức bình thường để app của bạn có thể cập nhập các data mới nhất cũng như tương tác của người dùng . Trong bài viết này mình sẽ call data từ server một cách đơn giản nhất để những ai chưa biết có thể call được 1 cách dễ dàng . flutter có hỗ trợ nhiều thư viện nhưng ở bài viết này mình sẽ sử dụng packet http . http là một thư viện Future-based sử dụng tính năng await và async. Nó cung cấp phương thức cấp cao và đơn giản để phát triển REST trên ứng dụng di động. 

Một vài phương thức chính :

– read : gởi yêu cầu lên sever thông qua phương thức GET và trả về  Future<String>

– get : gởi yêu cầu lên sever thông qua phương thức GET và trả về Future<Response>. Response là lớp giữ lại các thông tin phản hồi 

– post : gởi yêu cầu lên sever thông qua phương thức POST  bằng việc đưa giá trị lên sever và phản hồi Future<Response>

– put : gởi yêu cầu lên sever thông qua phương thức PUT và trả về phản hồi như Future<Response>

– head : gởi yêu cầu lên sever thông qua phương thức HEAD và trả về phản hồi như Future<Response>

– delete : gởi yêu cầu lên sever thông qua phương thức DELETE và trả về phản hồi như Future<Response> 

Ở bài viết này sẽ chỉ tập trung vào phương thức GET và hiển thị data dưới dangj list view cơ bản .

Step 1 : Bạn cần add thư viện http ở pub.dev vào file pubspec.yaml

https://pub.dev/packages/http

Step2 : Cần 1 link apidemo mà mình lấy link này

https://jsonplaceholder.typicode.com/posts

Step3 :

Tạo file mới post_model.dart trong lớp model 

Viết factory constructor trong lớp model , Post.fromMap dùng để chuyển đổi dữ liệu map trong đối tượng Post . Thông thường, tệp JSON sẽ được chuyển đổi bên trong đối tượng Dart Map và sau đó chuyển đổi sang đối tượng liên qua (Post) 

Step 3 : Bây giờ ta sẽ viết 2 phương thức – parsePost và fetchPost – trong lớp chính để lấy và tải thông tin sản phẩm từ web server(máy chủ) trong List<Post>

Step 4 : Ta có thể hiển thị data lên màn hình ở main.dart

Và đây là kết quả :

Hi vọng qua bài viết này các anh em  có thể nắm được cách get data từ server một cách dễ dàng

1 comment

Tan October 21, 2023 - 2:14 PM

Sao mình làm theo không được ạ.

Reply

Leave a Comment

* By using this form you agree with the storage and handling of your data by this website.