Pets Adoption App 🦄

Ipets

Instructions

Get pets, type: Get, https://coded-pets-api-crud.herokuapp.com/pets
Create a new pet, type: Post, https://coded-pets-api-crud.herokuapp.com/pets
Update a pet, type: Put, https://coded-pets-api-crud.herokuapp.com/pets/{petId}
Delete a pet, type: Delete, https://coded-pets-api-crud.herokuapp.com/pets/{petId}
Adopt a pet, type: Post, https://coded-pets-api-crud.herokuapp.com/pets/adopt/{petId}

Part 1: Get Data

  1. Install dio into your project:
flutter pub add dio
  1. Create a folder named services, inside it create a file called pets_services.dart.
  2. Import dio package in pets_services.dart.
import "package:dio/dio.dart";
  1. Create a new DioClient class and initialize a new dio instance.
  2. Create a function to get the list of pets and name it getPets.
  3. Our endpoint is:
Get, https://coded-pets-api-crud.herokuapp.com/pets
  1. Dont forget to ass async and await
  2. Store the response of the request in a Response object.
  3. In your PetsProvider, create a new function that calls getPets .
  4. Make the button in the home_page call the provider function.
  5. Print the response in the debug console.

Part 2: Use the data

  1. Add the following packages flutter pub add json_serializable , build_runner
  2. Go to the pets model and add this code before the class

import 'package:json_annotation/json_annotation.dart';

part 'pet.g.dart';
@JsonSerializable()
  1. Run this in terminal flutter pub run build_runner build
  2. Add the following code in the pet model

factory Pet.fromJson(Map<String, dynamic> json) => _$PetFromJson(json);
  Map<String, dynamic> toJson() => _$PetToJson(this);
  1. In pets_services.dart save the response in a list of pets and convert from Json to pet List<Pet> pets =(res.data as List).map((pet) => Pet.fromJson(pet)).toList();
  2. Add try and catch in case of Dio Error try{…}on DioError catch(error){…}
  3. Change return type to List, fix the function so that it returns a future list of pets
  4. Finally fix the provider as well by adding async and await

GitHub

View Github