SLC S23-W5 - Recipe Finder App - Give Ingredients and Get Recipes 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 5 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.

Made with Canva

I have worked with Flutter in last season. And today I will develop a recipe finder application. It will accept the ingredients from the user input and based on the given ingredients it will fetch the recipes for the user. The user can get the details of the recipe such as complete ingredients their benefits and the instructions to cook the complete recipe. I will use an API for this application.

We often face to problem to decide what to cook on the basis of the available ingredients. So to solve this problem I have come up with a solution to provide a user different recipes on the basis of the ingredients.

In my this project of recipe finder application there will be these features:

• Home Screen
• Details Screen
• Favorite Recipes
• Search Bar

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:

• cached_network_image: ^3.4.1
• http: ^1.3.0
• provider: ^6.1.2
• hive_flutter: ^1.1.0
• html: ^0.15.5
• photo_view: ^0.15.0

This is the user interface of the home screen. To make it look unique I have used black colour for the background and similarly black colour for the app bar of the screen. At the top in there is the beautiful title of the app bar. I have used an emoji of a dish bowl to make it look more beautiful and attractive.

There is a search bar. This search bar has rounder borders and a search icon button to perform the search functionality of the application. It has hintText to facilitate the user to enhance the user experience.

Then there is the section to display the favorite recipes saved in the local storage of the device. I have used hive_flutter package to save the favourite recipes in the local storage of the device. It shows a motivational line if there are no recipes in the favorite list of the recipes.

This is the working of the search functionality ultimately the overall functionality of the application. I searched recipes by entering two ingredients tomato, cheese. The application searched available recipes with the help of API. It shows the list of the available recipes. I used ListView.builder and ListTile` to show the list of the available recipes. In the leading I fetched the image of the recipe and in the title of ListTile I fetched the title of the recipe. The list tile is wrapped by card widget due to which it appears as an elevated card.

Before adding to favorites	After adding to favorites

When we choose any recipe from the search results then the details of the recipe screen opens and shows all the available details of the recipe. In the app bar there is the title of the app bar and there is also an icon button of heart shape. I used two heart icon s with the ternary operator use. One heart is outlined and the other is filled. It is used to add the recipe to the favorite list. When the user click the heart icon it is is added to the favorite list ad the heart also changes from outlined to filled heart.

In the body there is the detail of the recipe. At first the image is displayed on the screen with a title below the image and then in a row two more characteristics of the recipe which is time to cook and quantity to serve for the persons. I used photo_view package to display the image as clickable and enable zoom to the image.

In the detail screen this is the section to display the ingredients of the recipe. These are displayed in a card widget. I displayed all the ingredients as a list that is the reason they are being appeared in bullet points.

After the ingredients this section displays the nutritional information of the recipe. I used DatatTable widget to define the columns and rows so that the data can be displayed in an aligned way. I used some emojis to make the data look more interesting.

This is the section to display the instructions of the recipe. It has fine details to cook the recipe by using the listed ingredients. This uses a card widget to display the instructions regarding the recipe. At the bottom there is the link to visit the full details of the recipe such as a step by step guide with the visuals. The link will take you away from the application and it will open in external browser.

I searched some recipes and added them to my favorite list. You can check my favorite list of recipes. I added two recipes and these are appearing in a grid layout where the value is to show 2 items in a row. I used Stack to display the image in the card widget at the bottom and the title on the image. I created a delete button to remove the recipe from the list. I added it as a floating button in the card widget using the postioned property of stack. When the user click on this button the recipe is removed from the screen and the screen is updated.

This api_service.dart file which includes all the functionality to fetch data by using the API endpoint. I am using https://api.spoonacular.com/recipes API endpoint to fetch the available recipes on the basis of the ingredients. It send request to the endpoint on the basis of the ingredients given by the user and then fetches the data to display if the API does not work it throws exception. Similarly it works for fetching the details of the recipe. It checks the selected recipe and fetches details of that recipe. It works on the basis of the integer id.

This is the code which is used to ad the recipes to the favorite and to remove from the list of the favorite. It is using local storage services with the help of hive as a core functionality and hive_flutter for the initialization of the flutter project.

This code fetches all the available recipes from the local storage on the basis of an integer id. It checks if a recipe is already added as a favorite item or not. If the id is not added as favorite then it adds it to the local storage and ensures the id is saved as an integer which helps to easily fetch the recipe again. Similarly to remove the recipe from the list it checks if the recipe id matches with the items available in the local storage and then it removes the matching item. To check if a recipe is already added in the local storage it uses a bool variable.

This is the complete working of my project. The application starts from the home screen which appears empty of there are no already favorite recipes added. When the user searches the recipes on the basis of the ingredients it takes some moments while fetching and displaying the data. The user can select any recipe available in the result. When the clicks on the recipe then the details of the recipe is displayed with different section. The image is clickable and can be zoomed. If the user likes the recipe the user can add the recipe to favorite list by checking in the heart icon button in the app bar. The favorite items appear on the home screen for the easy accessing.

---

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.