DEV Community

Nguyễn Hữu Hiếu
Nguyễn Hữu Hiếu

Posted on

flutter getx - deal with rest api (get, post, put, delete)

Overview

  • Step 1: Make server
  • Step 2: Make request to server

Prerequisites

  • NodeJS
  • Baseknowledge about Flutter and Getx

Step 1: Make server

1.1. Install json-server

Ref: https://github.com/typicode/json-server

npm install -g json-server
Enter fullscreen mode Exit fullscreen mode

1.2. Make data

// data.json
{
  "students": [
    {
      "id": "1",
      "name": "John Doe",
      "email": "johndoe@gmail.com"
    },
  ]
}
Enter fullscreen mode Exit fullscreen mode

1.3. Run rest server with this file

json-server --watch data.json

## result
  \{^_^}/ hi!

  Loading data.json
  Done

  Resources
  http://localhost:3000/students

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

Enter fullscreen mode Exit fullscreen mode

1.4. Verify that everything working correct

curl http://localhost:3000/students

# result
[
    {
      "id": "1",
      "name": "John Doe",
      "email": "johndoe@gmail.com"
    },
]
Enter fullscreen mode Exit fullscreen mode

Step 2: Make request to server using Getx

Ref: https://pub.dev/packages/get

2.1. Make file main.dart

// main.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';

Future<void> main() async {
  Get.put(StudentProvider());

  runApp(GetMaterialApp(home: Home()));
}

class Home extends StatelessWidget {
  final StudentController studentController = Get.put(StudentController());
  Home({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Rest API"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                studentController.getAllStudent();
              },
              child: const Text("GetAllStudent"),
            ),
            ElevatedButton(
              onPressed: () {
                studentController.getStudentById("1");
              },
              child: const Text("GetStudentById"),
            ),
            ElevatedButton(
              onPressed: () {
                var uniqueId =
                    new DateTime.now().millisecondsSinceEpoch.toString();
                studentController.createStudent(
                  Student(
                    id: uniqueId,
                    name: "John Doe $uniqueId",
                    email: "test$uniqueId@gmail.com",
                  ),
                );
              },
              child: const Text("CreateStudent"),
            ),
            ElevatedButton(
              onPressed: () {},
              child: const Text("UpdateStudent"),
            ),
            ElevatedButton(
              onPressed: () {},
              child: const Text("RemoveStudent"),
            ),
          ],
        ),
      ),
    );
  }
}

class StudentController extends GetxController {
  final studentsLoading = false.obs;

  final StudentProvider studentProvider = Get.find();

  @override
  Future<void> onInit() async {
    super.onInit();
    await getAllStudent();
  }

  Future<void> getAllStudent() async {
    studentsLoading.value = true;
    try {
      var response = await studentProvider.getAll();
      print(response.body);
    } finally {
      studentsLoading.value = false;
    }
  }

  Future<void> getStudentById(String id) async {
    studentsLoading.value = true;
    try {
      var response = await studentProvider.getById(id);
      print(response.body);
    } finally {
      studentsLoading.value = false;
    }
  }

  Future<void> createStudent(Student student) async {
    studentsLoading.value = true;
    try {
      var response = await studentProvider.create(student);
      print(response.body);
    } finally {
      studentsLoading.value = false;
    }
  }

  Future<void> updateStudent(Student student) async {
    studentsLoading.value = true;
    try {
      var response = await studentProvider.update(student);
      print(response.body);
    } finally {
      studentsLoading.value = false;
    }
  }

  Future<void> removeStudent(String id) async {
    studentsLoading.value = true;
    try {
      var response = await studentProvider.remove(id);
      print(response.body);
    } finally {
      studentsLoading.value = false;
    }
  }
}

class StudentProvider extends GetConnect {
  @override
  void onInit() {
    httpClient.baseUrl = 'http://localhost:3000';
  }

  Future<Response<List<Student>>> getAll() =>
      get('/students', decoder: Student.listFromJson);
  Future<Response<Student>> getById(String id) =>
      get('/students/$id', decoder: Student.fromJson);
  Future<Response<Student>> create(Student student) =>
      post('/students', student.toJson(), decoder: Student.fromJson);
  Future<Response<Student>> update(Student student) =>
      put('/students/${student.id}', student.toJson(),
          decoder: Student.fromJson);
  Future<Response> remove(String id) => delete('/students/$id');
}

class Student {
  final String id;
  final String? name;
  final String? email;

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

  // fromJson
  factory Student.fromJson(dynamic json) {
    return Student(
      id: json['id'],
      name: json['name'],
      email: json['email'],
    );
  }

  // listFromJson
  static List<Student> listFromJson(dynamic json) {
    return List<Student>.from(json.map((student) => Student.fromJson(student)));
  }

  // toJson
  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
      'email': email,
    };
  }

  // toString
  @override
  String toString() {
    return 'Student{id: $id, name: $name, email: $email}';
  }
}
Enter fullscreen mode Exit fullscreen mode

2.2. Touch the button and see the log

Image description

Top comments (0)