SLC S23-W6 - Pet Finder App - Find and Adapt Pets in Flutter
Assalamualaikum my fellows I hope you will be fine by the grace of Allah. Today I am going to participate in the steemit learning club season 23 week 6 by @mohammadfaisal, @kafio, @alejos7ven under the umbrella of steemit team. It is about the technology and development. Let us start exploring this week's learning club.
I have worked with Flutter in last season. And today I will develop a pet finder application and it will help the users to find the pets and adopt them. Basically this application is for the USA and Canada where the people are very much interested about the adoption of the pets. You can just give the location name in those countries and then you need to select the type of the pet and just search and you will see the list of pets. I will use an API for this application.
In the world there are many people who want to adopt the pets but they do not know where to find the pets including cats, dogs, horses, and birds. So it will be a one stop for all these pets including the details of the organization which offers the adoption of the pets.
In my this project of pet finder application there will be these features:
- Home Screen
- Details Screen
- Favorite Pets
- Search Bar
- Light and Dark Mode
These will be the major screens and features of my this recipe finder application.
For all the development I need to use these packages from pub.dev:
http: ^1.3.0provider: ^6.1.2hive: ^2.2.3hive_flutter: ^1.1.0build_runner: ^2.4.15
The dully designed appBar which has dark mode and light mode button. At the right side corner there is the switch button which is used to switch between the dark and light mode.
There is the search section of the application which allows the user to search with the filters. There are total of 4 sub sections in this search section. In the first section you need to enter the location to search the pets in the specific location. Then it gives you the opportunity to select the pet category. You have the opportunity to search on the gender basis and on the age of the pet. These filters make the search section very useful for the users to search only the required pets instead of seeing all types of pets.
After entering all the details the users needs to press the search pet button to call the action to fetch and display the pets within the filters. But if the user wants to see all the pets of the category then do not apply the filters and it will show all the pets within the selected category.
This section displays the result of the pets after searching while applying all the filters.
 |  |
|---|
Then there is the section to display the favorite pets saved in the local storage of the device. I have used hive_flutter package to save the favourite pets in the local storage of the device. The screen is updated as soon as the pet is added to the favorite list. To update the screen dynamically and to only update the favorite section I have used provider which saves the energy of the device to update the whole screen but only updates the required section.
At the top I have initialized hive box in this file to access the data from the hive box and add the pets to the favorite or to remove from the favorite. In the provider after defining the logic to update the screen we need to use notifylistener to notify the element to be updated.
This is the working of the search functionality ultimately the overall functionality of the application. I searched pets by entering the location as Washington and by selecting the rabbits category from the pets and I did not mention the age. So it fetched all the available rabbits in that location. I have used icon and the network image to display as the profile image of the pets. Firstly the icon is displayed if the image is not available or not loaded yet but if the image is available then the image is displayed. I used ListView.builder and ListTile` to show the list of the available pets. In the leading I fetched the image of the pet and in the title of ListTile I fetched the title of the pet and similarly in the subtitle I displayed the characteristics of the pets such as age, gender and breed. The list tile is wrapped by card widget due to which it appears as an elevated card.
To access the services of the API first of all there is the need of authentication. To enable the authentication the access token is obtained by sending request to the API endpoint using the API Key and Secret code. After accessing the token the API generates the response and provides the result in the json format. Complete logic of the API service will be shared in the GitHub repository.
When we choose any pet from the search results then the details of the pet screen opens and shows all the available details of the pet. In the app bar there is the title of the pet name.
In the body there are different 3 sections. The first section is used to display the image of the pet. I have used card widget ad ClipRRect to display the image of the pet in a beautiful way. The image is simple of the top but from the bottom I have applied rounded corners by giving radius. It is making the user interface beautiful.
In the card widget with the use of the stack I have placed the favourite button on the image at the right side. When the user clicks on the favorite button the pet is added as a favourite in the local storage and the it starts appearing the favorite section. The icon is changed from outlined to filled and the text is changed from Favorite to Favorited.
Then in the second section there is other details about the pet such as the name at the top the breed, age, gender, category, and description of the pet. In the description there is teh light details about the pet.
In the detail screen at the end the details of the organization are available. Anyone can contact the organization to adopt the pet. In the details of the organization there are details like the name of the organization and other available points for the contact purpose such as the email, phone number and website.
This is the function to fetch the details of the organization using the singleton method. By using the access token which was built while searching the pets from the API. It handles different types of errors and exceptions.
This is the complete working of my project. The application starts from the home screen and displays the search section, search result section and favorite section. The user can use the search section to search the pets by applying the desired filters such as mentioning the age, gender, pet category and location. This application takes some time to fetch and display the relevant results of pets. If user selects any pet it displays teh complete details of the pet and the user can add the pet to favorite list. It has two themes dark and light mode and the user can choose as per the desires. By choosing the pet and getting the details of the pet the user can contact the organization to adopt the pet.
I have uploaded all the files in the GitHub Repository.
I invite my friends @ulfatulrahmah, @maarnio, and @chant to show their capabilities in this technology and development learning club.