How to receive the response of a POST request using flutter

Issue

I am new to flutter and am trying to receive a response that is returned when I do a post request. I want to display the response object in a preview modal however, i am stuck on how to go about it. I have so far been able to hit the post endpoint successfully and a console.log shows me the response as I expected. How can I receive the response and assign it to a variable that I can then pass to a view modal?

Here is what I have done so far:

    /*  The Post DbRequest */
    Future < Reservation ? > priceReservation(Reservation priceReservation) async {
      var content = jsonEncode(priceReservation.toJson());
      const baseUrl = ApiEndPoint.baseUrl;
      searchUrl = '$baseUrl/reservation/price';
      var response = await http.post(
        Uri.parse(searchUrl),
        body: content,
        headers: {
          "Content-Type": "application/json"
        },
      );
      final data = json.decode(response.body);
      if (response.statusCode == 202) {
        print(data);
        return data;
      } else
        print(data);
      return null;
    }

    /*  The Post Service  */
    priceReservation(priceReservation) async {
      ReservationDbRequests requests = ReservationDbRequests();
      Reservation ? reservation =
        await requests.priceReservation(priceReservation);
      return reservation;
    }

    /* How can I receive the response in this save method and assign it the data variable */
    _save() async {
      if (_formKeyBooking.currentState!.validate()) {
        Reservation reservationObject = new Reservation(
          roomId: _roomController.text,
          email: _emailController.text,
          quantity: _quantityController.text.toString(),
          checkInDate: DateTime.parse(_checkInController.text),
          checkOutDate: DateTime.parse(_checkOutController.text),
        );
        Response data = await Provider.of < BookingService > (context, listen: false)
          .priceReservation(reservationObject);
        print(data);
        setState(() {
          _isLoading = false;
        });
        toastMessage(ToasterService.successMsg);
      } else {
        toastMessage(ToasterService.errorMsg);
      }
    }

// Here is my response
{
  "id": "c204b78b-cae3-44ea-9aaf-2f439488fef9",
  "email": "adeleke@email.com",
  "quantity": 1,
  "nights": 5,
  "totalPricePerRoomPerNight": 134.07,
  "totalPrice": {
    "rooms": 615.0,
    "discounts": 0.0,
    "taxes": 55.35,
    "total": 670.35
  },
  "room": {
    "id": "d54986a8-4e00-4332-8edc-acf6e380f6c4",
    "name": "villa",
    "price": 123.0
  },
  "checkInDate": "2021-09-29T12:00:00+03:00",
  "checkOutDate": "2021-10-04T12:00:00+03:00",
  "taxes": [
  {
    "name": "room services",
    "percent": 9.0,
    "amount": 11.07
  }
  ],
  "discounts": []
}

Solution

will this help? check this artilcle for json serilization for complex response

Future <Map<String,dynamic>?> priceReservation(Reservation priceReservation) async {
//you API access code goes here
//check the status first before decoding
if (response.statusCode == 200) { //got the response with data
      return json.decode(response.body);
    } else if (response.statusCode == 204) { //got the response but no data
      return null;
    } else { //throw exception for other status code
      throw 'error';
    }
}

    /*  The Post Service  */
    Future<Map<String,dynamic>?> priceReservation(priceReservation) async {
      ReservationDbRequests requests = ReservationDbRequests();
      Map<String,dynamic>? response =
        await requests.priceReservation(priceReservation);
      return response;
    }

//view
Map<String,dynamic>?> response = await Provider.of < BookingService > (context, listen: false)
          .priceReservation(reservationObject);
        print(response); //now it should be a Map
if(response != null){
  print(response); //all response
  print(response['id']); //access id
  print(response['email']); //access email
  print(response['room']['name']); //access room name
} 

Answered By – rosh-dev

Answer Checked By – Marilyn (FlutterFixes Volunteer)