Oflutter: Create a Recipe List App using Flutter and API

[Music] hello everyone and welcome to my channel in this tutorial we will learn how to create a super simple food recipe list app using api just a quick note that this tutorial is not about making custom widgets or other layouts i wanna focus more on the right api structure and how to integrate it with an app okay let's begin i have a complete new project in flutter i removed everything from the main.dart file the only thing i left is my app stateless widget i also modified a title with food recipe disabled debug banner and in theme data i added white primary color body text to text style color i set to white and for now home widget i set to empty scaffold now let's go to the pubspec.yaml and make sure that sdk version is set to 2.7.0 this will disable a null safety feature and add http package to the dependencies just in case i left a link in the video description for the article so you can get all code and steps guides from there okay let's start with the project structure in the leap folder create two files views and models inside views folders create home.dart file and create a widgets folder inside this folder create recipe card.dart file this will be our custom recipe card widget now go to the home.dart file and import material design package then create a home page statful widget return scaffold instead of container and create an app bar with custom road title widget inside children add icon restaurant menu and text widget food recipe then add space between them by creating a sized box now let's copy a homepage stateful widget and put it in main.dart file instead of an empty scaffold make sure that you imported a home page dart file so after we saved changes you will see that our homepage appeared on screen let's go back to home page and make our title centralized by typing main access alignment to center awesome now let's create our custom recipe widget go to the recipe card.dart file import material design again i don't want to spend time on custom widgets so go to the article that i provided in the description and copy the recipe card code our custom recipe card widget takes title which is a recipe name then rating of recipe total cooking time and thumbnail url ok we can now close this file and import to our homepage widget in the scaffold body widget type recipe card and populate it with random information for now until we connect it to api you can use the data from the article if you want if you save the changes you will see that our single card with recipe appeared on the screen that's great now let's create two files inside models folder one is recipe the dart and another is recipe.api the dart file awesome now let's start to integrate recipe api so i will use a rapid api service for getting recipes for this i found the yummly api i will leave a link for this api in the description the only thing you need to do in order to use this api is sign up with your own account this api has a free version if you go to pricing you will be able to select a free plan however the only restriction that you will have is only 500 requests per month for practicing i think it's more than enough ok let's go back to the endpoints and select get feeds list and click on the test endpoints if everything is ok you will receive a response in json format with recipes and other data expand first item of fit key as you can see there are many data that you can use in the app however for making this tutorial simpler the only thing that we're going to use is a details key so in fit key expand content and then expand details key you might get confused with all this data but for simplicity we're gonna use only four parameters first one is total time then we're gonna use image for thumbnails so expand an images key we will focus on only first elements of the image key and we will take only hosted large url for getting an image then we will use a name key for the title of recipe and finally we will use a rating tag for getting a rating for the recipe ok now let's come back to our project and start to create a recipe models so in recipe.dart file create a class recipe we're gonna create only those parameters that we're gonna get from api if you take a closer look we will get a name images rating and total time so let's start with string name string images double rating and string total time then we need to initialize these variables okay awesome now let's create a factory recipe from json function this will allow us to instantiate our recipe variables from json file that we're gonna get from api create factorial recipe from jason that takes a deny mcjson then it will return a recipe instance with parameters name jc name as string you may ask why jason name well again this is a key from the recipe that we're gonna get from details which is a recipe name next we're gonna set image a string however as you may mention image from the api is not a string it's an array so what we will do is we always gonna get first elements of the image and take hosted large url great finally it will be rating as double and total time a string so now we'll create another function recipe from snapshot basically what it's going to do is take a list of data that will be converted to list of recipes so return a snapshot list to map that will be at the end converted back to list and inside map function retune our earlier created factory recipe dot from json great now we can move on so let's create an api integration go to recipe.api.dart file and create recipe api clause then we need to import three packages one is dart converted second one is our recipe model and the last one is http package as http now let's go back to yamli api and copy request request query and request header so it's easier to convert it to dart code paste it to recipe app class and comment everything next create a future get recipe function the only thing we need to change is that future will return a list of recipes next create a variable uri and assign uri.http so instead of authority change it to hostname then an encoded path change to api path which is fit slash list and the last one will be our query as a map so just copy and paste it from the commented line next create a final response it will be a wade http.cat request that takes two parameters one is uri variable that we created earlier and the second one is a header that we must use uncomment header and paste it to response header since http.getheader is a map of string string use query string true make as a string ok this is a very important note before continuing make sure that you use your own x rapid api key next create a map data that will be assigned as json decode that takes response that body basically our data will have a full response that we get from api call which is stars from fit key if you remember next we need to create a temporary list that help us to parse the recipe data since we have to select a specific data from api call okay now we will loop through the data feed because it's an array of recipes and then we simply add i variable content key and details key and finally return a recipe recipe from snapshot function that takes our temporary list and that's it we now can remove commented lines so we have a cleaner code good now let's close the recipe.api file since we don't need it anymore but leave recipe.dart file as we will come back to it in just a moment go to home page file and let's start to integrate api with our ui so create a recipe list make sure that you invert a recipe package next create a boolean is loading and set it to true then create an override init function and leave it for now then create a future void function get recipes and assign our recipe list variable to recipe api dot get recipe and after we receive a data set state office loading to false okay now let's print our recipe variable to test our api and see if it's work so initialize our get recipe function to init state if we save our code and reload we should see a list of recipes in the debug console as you can see we got our recipe from api our recipes is not really readable when we print them so in order to fix this let's come back to our recipe.dart file and create overwrite string to string function so we can customize our print output as we want so now if we reload a project we should get readable recipe instance great as you can see it's easier to read our recipe if we need to debug them finally let's remove static recipe card that we created at the beginning of the video type if it's loading then show circular progress indicator in center otherwise build list view dot builder that takes item count as our recipe length list and item builder that return our recipe card widget the only thing i have to mention that our rating is a double but recipe card rating is a string my mistake so just at the end add to string function awesome now if we save we will get our recipe list from api just a quick note that this approach of loading data from api using circular progress indicator that redraw whole body is not efficient at all use for example stream builder or other block approach i did it just for the video simplicity anyway that's pretty much it for today's tutorial i hope you enjoyed the video have a great day you

Channel: Oflutter

Views: 18,218

Keywords: oflutter, flutter, glutter, flutter for beginners, flutter tutorials, lessons 2021, flutter recipe list app, flutter working with API, flutter API, http package

Id: FlGTSb7_9jk

Length: 13min 2sec (782 seconds)

Published: Thu Apr 29 2021