HTTP Get request in Flutter App | Fetch Records from MySQL with PHP API | Future Builder in Flutter

hey guys welcome to River Academy and in this tutorial we are going to look at fetching records from MySQL and displaying it on your flutter application so we started by creating a new project in Visual Studio code and I am removing these extra comments and also I will remove this title parameter okay and I will also remove these two classes so that we can start with a clean slate okay and I will create a new class by the name my home page okay I will create a stateless widget by the name my home page you can add instead of container this well-written scaffold okay and now I will quickly add the add bar and the title takes to this f bar okay title text say API demo okay and I will run this in emulator okay you can see now this is nicely running in emulator okay what I will quickly do is go to the editor and change the font size of the Ritter has many of you have requested me okay so cool I hope these fonts are okay and readable okay now quickly go back to the pub sake yml file and over here we will add this HTTP dependency okay so when I save this it will run packages dot get command and this is now added the dependency in our project okay now I have created this table products this is my PHP myadmin and you can see that this table has been created I have also created the API okay so I've created this API products dot PHP which will fetch the records from SQL okay so I have written this query over here and have fetched the records and this is the output of this API okay in the jason case i have written this PHP API to fetch the records okay so now what we will do is we will call this API in our fluttered application cool okay so this is the API have written and we will call this API in our flatter application okay this is the output of the API okay so for that we will need to create them model class okay so there is this quick type okay where we have to paste the output of the API and it will generate the poro class for us that is the model class okay so here I have copy pasted the output of the API and it has generated the model class so what I will do is I will create a new file over here product dot that and I will simply copy paste this okay so this class will help us okay so in the quick type I have simply copy pasted the output of my API and it has generated this photo class for us okay which I have copy pasted over here okay which will which we will use in the API okay so now I will create a new file same product API dot dot okay here we will make the API call okay so what I will do is I will first write the import statements okay I will import this product dot that file ok and I will also import the HT Tippie dependency which we have added okay okay yes HTTP good now we will make the API calls so I will write a function say future list of products okay so this API will return us the list of the products okay say fetch products you think okay so we are going to make the HTTP calls so we will make this function a sink right so here I will write the URL of my API okay so let us go back over here to the API and I will copy paste the URL of this API to your okay and let us make a HTTP request okay so final response equals to await HTTP dot get and the URL okay so we are making an HTTP request and we have got the response in this response variable okay so what I will do is I will call this function products from Jason okay this was the function which was made in the quick type okay so basically what this function will do is it will JSON decode the output okay response dot body okay so this will written as the output it will decode the response and return us the output in our required format okay this is this was our API okay PHP API right this was the output of the API and we have copy pasted the output over here to generate the model class okay and then we have made the API call okay now let us go back to the main dot that file and start building the UI okay so what I will do first is quickly input all the required files okay we will import the product or that file and I will also import the product API dot that okay where we have made the API call cool now this both files are added now let us start building the UI so I will go to the body and I will add a container okay child of the container and over here we will call the function which we have written in product API so for that we will use the future builder okay and in the future we will specify the name of the function where we have made the API call it is so fetch product so in the future we will write fetch products okay so this will return us the output ok builder context and snapshot okay so this this snapshot variable has the output of fetch products okay now we will use the okay but before that we will make a check over here if snapshot dot has data okay and if it doesn't have the data or violet is still fetching the data we can display a circular progress indicator okay so until the snapshot is fetching the data okay we will return circular progress indicator okay so now when I save in hot reload you can see this circular progress indicator nice so let us go back in the inside the if condition so I will right over here written list view builder okay we will make a list view to display all the records okay so this will have the item count function so what will be the item count snapshot dot data dot length and we will also write this shrink web shrink wrap true and then we will write this item builder function okay to build each and every element okay so this will take build context in index okay so consider this item builder function as your for loop okay and this index is the ie variable of your for loop okay so what we will do is we will extract the product from the snapshot data okay so from the snapshot dot data we will extract a single product object okay we will use this index over here okay so this is products I think s will come okay cool okay so we will extract a single product from here and populate the row okay so whatever we write inside this function will constitute a single row of your list view so now I will just write the text over here okay say dollar product dot product name okay so when I save in hot reload you can see all the product name names are displayed over here okay all the product names which were there in your database okay are displayed over here you can just verify okay so we have made the API call to fetch the records and we have displayed it on our flutter application you can style this text as per your requirements okay so let me increase the font size say 20 good this is good okay so once you got the data over here you can style it and customize it as per your project requirements okay now let me wrap this in a column so that I can display description also okay so I will copy paste this and display the product description as well okay and let me change the font size to 15 for description okay so you can see the product name and description are fetched from the database and are displayed okay I will align this as a cross axis alignment dot start okay good okay so what I will do is wrap this in a card widget so that it displays properly okay so now you can see this is properly displayed okay once you have the data you can play around and display it as per your requirements okay so let me add some padding to the base container okay cool this is proper now if you want you can change style the text let me change the color of the product name to blue okay or you can also change to any of the required colors say I will do red okay also let me change the color of the product description say colors dot black 54 okay this is okay so once you have got the data you can customize it okay let me add some padding over here also okay so now you can see this product title and the product description are properly displayed see what else we can do okay there was this product price also so let me display that also okay product dot price and let me change the color to say black okay so you can see the price is also displayed now okay so I hope you understood the concept of making an API call to fetch the records from your SQL server and display it on your flutter application I hope you liked this video and if you really did please share it with your friends who are also learning flutter thank you so much for watching

Channel: Mayuri Ruparel Tech

Views: 33,339

Keywords: http call from flutter, http get request from flutter, call php api from flutter, making network calls in flutter

Id: lTKFYGHx16M

Length: 15min 39sec (939 seconds)

Published: Tue Sep 17 2019