Fetch data from Google Sheet to Flutter app | Flutter Tutorial For Beginners

so hello and welcome back to my channel my name is sanskar and in this particular video we are going to learn how to fetch data from a google sheet to our filter application so as you can see i have some data in my google sheet and i'm fetching all of it in the flutter application and showing it accordingly so how we are going to build this is by using google apps script so how this will work is we will create a google app script which is going to have an api key so this is the api which we will create right um and this api is going to return all the data which we have inside the google sheet then we can use this api to fetch the data in our flitter application right the best part about this is you don't need to know any of other languages to understand what is happening over here i'll explain step by step each and every line so yeah let's uh let's start to build this this video is going to be divided into two sections the first one is going to be setting up our google sheet and google apps script to create a api which is going to return all the data in our google sheet the second step will be to fetch the data from that particular api and then show that in our application so let's begin first to set up the google sheet visit google sheets and then visit that website go to google sheet and then just create a new blank sheet you can also use the one which you already have it does not matter now i'm going to give this name a tutorial uh student feedback feedback and as a dummy data i'm going to use the same data which i have over here and i'm going to paste it here okay now just to give it a little bit of a width yeah so now we have the data dummy data available over here which we can fetch so now i would like to move on to create a app script api so i'm going to go click on tools click on script editor and this is going to open up a new window for the script now if you're opening up on a normal and it's not opening this particular page i did face uh some similar problem so what i'm doing is i'm opening this in incognito mode as you can see right so if you face any problem opening this page after clicking on this tools and clicking on the script editor then please try in the ign incognito mode as well okay so now the step is to create the api now for this we are going to create a do get function so let me name that do get now inside this first we will open the google sheet okay so let me open up the google sheet by creating a variable for that for a sheet so that when we have open google sheet we can do something with it right that's why i'm saving that to a sheet variable now i'm going to call spread sheet app dot open by id so there are multiple options you can open by id you can open by url i guess id is going to be the good enough for now you can even use the url as well so what do i mean by id is this is the url for your google sheet id is this part before that that slash edit and after this d slash just copy that part and paste it inside double quotes once that is done just end it with a semicolon so we have a sheet now now with this sheet what we want to do is we want to get all the values in that particular sheet right so what i'm going to say i'm going to say variable values so i'm going to fetch all the values inside of that and then save those to values variable so i'm going to say sheet dot get active sheet okay and then i'm going to say dot get data range right this is going to get the range of the data as well dot get values okay now we have the values next i'm going to create a variable data which is going to store the data which we will get inside of that values now i'm going to run a loop so what do i why i'm running a loop is because we have a lot of data in here right and i don't know how much or how many column and all are there right so why what i'm doing is i'm going to run a for loop according to the length of the values which i got so this was the api this is the project we are working on so let me just name this one as well this is going to be tutorial student feedback api i'm going to click on ok and that's going to be the name of the project now okay so let me show you what i was saying about the for loop so we are going to create a for loop variable i is equals to 1 and then i is smaller than values.length okay this is going to be the length of the values which we have and then i'm going to say i plus plus now there can be a lot of different values in your particular project why i am using uh this particular for each loop and creating another data rather than directly using this values is because i want some specified things so if i want this section uh just a second did i did uh i want this uh profile pic i want name source feedback source url if there is something more maybe i may or may not want that right so rather than getting all the values and using that i'm creating another variable of data and then saving the details which i need and then i'm going to send those details through the api okay so let's continue forward now one question which you may have is whenever we create a for loop we start with zero over here i equals to zero and i smaller than values.length i plus plus right so the reason why i'm starting it with one is because i don't want the zeroth position values what do i mean by that let's go back to the sheet and see um what i mean this first line is not actually the data but something for my own so this is to for me to know that yeah this is these are the profile pic these are the name source feedback and source url so in the api i don't want to return this first line that's why i have mentioned the i equals to 1 rather than 0. i will definitely recommend if you want to try this out with zero and you can see in the api you will have the first line as well so now i'm going to make the values as like this so now we have created a row and row is going to be equals to values in the ith position okay now let's create a object variable feedback now why am i creating an object well if you see the api let me show you the ap is actually returning a collection of object right if you don't understand a lot about the apis and all i have some tutorials on using apis by building a wallpaper app building a recipe app i will link them down in the description as well add a card so you can check them out after checking this video which will really help you understand apis and how to fetch and build application with it anyways i'm going to explain in this one as well so you don't have to worry much but yeah just for a better experience of everything so yeah we are we are creating an object now once the object is created like inside of this object we will have key value pairs right so let me create a new key so i'm going to say feedback sorry feedback and the key i want is the profile pic profile pic and i'm going to close that and that profile pic let's go back and see where is it so profile pic is actually the row number zero right so i want the row zero from the values so i'm going to say row zero then i'm going to say feedback name and the name is row one similarly for others as well so let me just do that row one then feedback source is equals to row two okay and then feedback then we have feedback then is equals to row three then feedback uh the last one was source url sorry yeah so this is just a source url which i have added um so that i can have a source of from where this is coming from okay so now we have all the different requirements we have and these are the values which we will be passing through the api right so now what i'm going to do i'm going to push all of these into the data variable which we created before so i'm going to say data dot push and i'm going to push the feedback feed back wait okay now once that is done i'm going to end it with a semicolon and then i'm going to return content service dot create text output right so that's how the api is actually working this is a text output which it is generating right now just text is not good enough um we actually want json dot the data which we have and dot set mime type to be content service dot mime sorry m-i-m-e type dot json so basically it's going to be returning a json text so now i can save this and publish this as a web app now who has the access to this app make sure to select anyone even anonymous okay now i will click on deploy i will click on review permissions and then just select your same google account okay i need to verify this but overall i guess you get the point that you just need to verify and confirm and it will be just deployed right so i don't want to waste your time so i will be using this particular api key of this particular one which i published already because this project is published so i'm going to just show you how it looks like so once that is done you will have this url right so now let me copy the url and this is the url which we will be using now if you face any problem till now let me know in the comments if i uh whenever i am available i will make sure to help you up okay so now the next step is to move on and fetch details or basically this data in our flutter app so let me open a new project this is a new floater project which i just created with the name google underscore sheet underscore database so let me scale this up okay now as you can see we have a lot of unwanted code so let me get rid of these comments we don't want them then i'm going to get rid of this my homepage widget it does not exist hence showing error let me now create a new folder it's going to be views i'm going to call a new file let me just call it home.dart and now i'm going to create a stateful widget here but before that i need to import material and then i can create a stateful widget here i'm going to name that home okay now i want to import this over here i'm going to say home it will give me an option to auto import it and i'm going to click hit enter get rid of this and save that once that's saved it's showing some error here what's the error override okay i guess i get i got rid of something is there a problem let me get rid of this okay and quickly create one more so i'm going to say home is it fine now i guess so okay so the next step is to just go inside the left folder and create a model so let me show you that again so we have this particular uh you know different values and whenever we are fetching a different values or list basically a list of object whether it is fi from firebase whether it is from api we create a model so first i'm going to create a model i'm going to go create a new file i'm going to call this let's say you know feedback model that that that makes sense since it's a feedback model um okay it should be dart not dark so i'm going to first start by creating a class i'm going to name that feedback model and then inside of it i'm going to have all those values so let me just make it like that make it like that and go over here we can close this decrease it a little bit and continue okay so the first thing which we have over here is a string which is going to be profile pic i'm using a capital uh camel camel case over here not capital but yeah camera case so i'm going to say string and then i'm going to give name then string source so all of these are string so that's why i'm using string but if you have any other you can string source url okay now we will be creating the constructor for it so i'm going to say feedback model this dot feedback this dot that this dot that this dot dot that this dot that now once we have both of these we need two more functions over here one function will be there to convert the json which we get so as you can see we are you know sending the json in stringify and content sentiment in json format one will be to convert that json into this model so that we can create a list of these model and then show that details in a list view the other one other function is going to convert a map to a like different values into this particular format so let me show you what i mean so the first function as i said is going to be a factory method it's going to be called feedback form dot from map and sorry from json i mean it's a json which we are getting i am going to say dynamic json and i am going to return as you may expect feedback form what am i naming it it should be feedback model feedback model okay now inside this feedback model as we have defined we will be passing feedback first then name then profile pic then source then source url now we can change this to named parameters so that we don't have to confuse about what to pass first so i'm going to say feedback inside of that i can say dollar sign json feedback feed fat okay that seems right we don't need this um sorry we do need that we don't have to yeah okay so that's the way how we can pass the feedback any error which we are making i guess we need to yeah let me just add that okay so similarly we will be fetching all the others i guess they are five so four and five now i'm going to write them down one by one so the next one is the name next one is the profile pic next one is the source next one is the source url name is as it is name now this particular one okay um just to explain this if you don't understand this properly over here this is a json which we receive right whenever we will be receiving the json from the api what i'm saying is inside that json get me the value of the key name so you need to make sure this is exactly same to what it is over here okay so for profile pic i'm not going to just say profile pic i'm going to say profile underscore because that's the name i have provided right over here okay now i'm going to go for source sources same so i'm going to use source for source url though we are using it like this so that's why i will be passing that like that then i will add a semicolon and save let me close this next next function is to have a map from to json now then i'm going to say like this so basically it's written type is map and the function name is to json so that we can call it feedbackmodel.2json if you want to convert that to json5 um then i'm going to say profile pic and that's equals to profile pic profile pic correct source that's equal oh sorry not like that but source is equals to source then what do we have we have a profile pic okay we have a source url so i'm going to say source url url and that's going to be source url okay that's going to be a comma then we have our name and we are going to pass name here then we have a feedback feedback and we are going to pass feedback there feedback okay so that that concludes the five i'm going to add a semicolon and that's done okay now let's move on to the home dot dot and before we continue further i would like to run this application in our real device so let me just grab a screenshot of this so that we can see what we want to build and then we can make it and now i am going to run this particular application which i just created now bear in mind this is going to be a whole blank screen with a black color whole black screen so let me just open up that screenshot which i just clicked and that's there let me just decrease of the okay that's the minimum width i can go for so let me just keep it maximum like that and we can minimize this for a second now let me just get it here get the mobile application right side of this okay so this looks good good let me get it here get this here okay so now we have this and i'm going to see so as i mentioned before we are going to see a black screen that's what we have right now i want to change this to a scaffold why am i using a scaffold because we want to use material widgets which is which includes the app bar so i'm going to say app now inside the app bar i'm going to first in add a title so title it's going to be text widget with mentioned students i'm going to save that and you can see we have it here okay the next thing which i want is i don't want the elevation as i can see here so i'm going to just get rid of that quick okay and then uh the colors and icons but i i think you're not here for that you you know we are here to learn how to fetch the details so let's let's continue on that we can i can do this at the end if you want so i'm going to go inside the container and inside that inside the child now before we can show a list we need to have a list item right so let me just quickly create that first and then we can continue so let me remove that create a stateful widget for the list item the reason why i'm creating a stateful widget is if you want to update oh sorry uh we should create a state less widget i mean since we have nothing to update but if you have something in your list item which is updating the in that case you can use a state full widget where you want to use a set state but i don't have any requirement in my feed so i'm going to create a stateless widget and i'm going to name that feedback type okay inside of that i am going to have this one so let me divide this into separate widgets so this hole is going to be the feedback tile which we are creating so this is actually divided into a different widget this is the first one and this is the other one right now both of these widgets are aligned vertically so we want to use column over here before we use column we need to mention it's a child of the container and then i'll say column inside column i will say children and inside children the first children we have is this row this is a row of two widgets this one and this one right so i'm going to create a row first inside of that row we have this image so i'm going to say image dot network why am i using network because we we will be showing the image via url now so let me just also mention all the variables which we are values which we have so the first value which we will have is the image url as i can see here i can say that profile pic as we have mentioned there let me just grab them from there itself like that like that so we need the profile pic we need the name we need the source we need the feedback we need the source url okay so now let me get rid of these get rid of that okay once you have defined all the different variables inside a widget we need to create a constructor to accept all of these so i'm going to say feedback type inside of that i'm going to name named parameters these are 5 so i guess it's better to use named parameter over here dot name and this dot source this dot feedback and this dot source url okay and these variables or the values are not going to change so i'm going to make them final so now let me save that and rather than passing a source here i can pass profile pic now okay now let's move on to the next step i also want to make sure i can show you something while i'm building so let me just copy this feedback tile and open or show it here but we don't actually have fetched the details yet so let's uh i'm leaving this in the middle as well right uh anyway let's let's continue and create up the function first to get the details so i'm going to say get feedback from sheet that's just a name i'm providing so to get the details from api we need to use a package called http so let me open that up and i'm going to just just a second let me just open a new tab and open http pub dot dev and i'm going to visit the website i'm going to search for http first one installing copy visit your spec.yaml file just below this make sure these are aligned in the same place save it to fetch or you can click on this close that one's done and now we are able to fetch the details now let me minimize this if you want to read more about this package not aware about how we use this for apis i do have already some good tutorials as i mentioned before wallpaper and recipe app you can learn from them as well but you can read the documentation if you want but basically we will be using this uh this have this post request okay and this also have a get request so you can see http get where are you not sure i don't think we need to find it but yeah we will be using a get request so let me show you how and what i mean by that just a second okay so what i uh let me just increase this a little bit i hope it's clear to all of you guys okay so now what i'm going to do i'm going to go inside this function and i'm going to say http well we need to import that first import http in course http http http as http now we can use it through this so i can say http dot get request and now i can pass the url so where is the url let me open that up not this one it will be from this one which we just were discussing so actually i'm not logged in with this particular like i need to up let me just try that again if they allow me for myself at least maybe no cancel anyone let me choose anyone even anonymous and let me deploy that and review the permissions select the account okay it's asking me to confirm i'm going to use this particular one but there is nothing extra you need to do you just need to deploy select your account confirm and then it will be deployed and you will see this kind of pop-up that it is being deployed as a web app and you just need to copy this current web app url if you have any problem again make sure to comment that down below i i will make sure to help you okay so now i'm going to submit that here let me minimize it okay now we have that and we will be getting the details now i am not going to just directly you know just get these details we need to save it somewhere right so what we can do we can create a list of feedback form what we have what have been named of feedback model and i'm going to call that feedback feedback models feedbacks i can say it like that then i'm going to say list feedback model and like that okay so we have this feedbacks um and now i i want to save the data which we get from this to this one right so what i'm going to do now is i'm going to say variable so you know draw whatever you want to name this data this is basically the raw data which we are getting right then what we can do we can say print what am i doing print raw dot body we can have a look at it how it looks like but um i guess we should just move on to json feedback is equals to convert dot json json decode we need to import this convert let me just make sure that convert okay we can import that like this import dart convert as convert like this okay and via this convert now we can use the json decoder where it is here now you can say dot json decode so you can see we have the option option available now and we can pass in the raw dot body which we have right now this body is nothing but the json which we get from the api so now once we have that i'm going to say as okay it's not accepting is not defined let me just check that out again okay so the raw i guess okay we need to use a weight here okay we need to wait for this to run and if we want to use a weight we need to use async okay so now in this draw what i'm going to do i'm going to say body and now it will work perfectly fine so we have this json feedback now just to show you what we have let me just print this out this is the sorry over here we will say this is json feedback and i'm going to write that dollar sign and json feedback and right there we have that let me copy that open this up in the um console save it all so i guess we have an error says that home to dot error method get done found runaway http.get says get method does not found okay let me save that again what if i rerun the application it says restarted the application let's just call this function okay guys let me just call this function in the init state why in the in its state because that's the first function to call when the widget starts let me just call that from there save that and now if i will restart the application either there is a error or it should show me this this is a json feedback so you can see we have this this is a json feedback we have the profile picture we have the name we have the source we have the feedback as well okay so let's let's continue now because we have that so now what i'm going to do i'm going to say variable directly use this you can say json feedback dot map json feedback feedback model dot from json this is the function which we created i hope you remember this one oh sorry this is this one okay so we are converting the json to the model from json and we when we are going to end this okay so this is going to return us a list of that so i can just say feedbacks is equals to that so if i will save that let me make sure our feedback is updated so i'm going to say console.log sorry for that guys i'm a bit mixed with you know multiple languages here so yeah um so feedbacks and i'm just going to get one value out of it i'm going to say 0 so let's save that and see how it is working let's go back to the debug console get rid of everything i'm going to restart the application again and what we are expecting is to first see this is a json feedback and the next we want to see the feedback zero value so this is the feedback which we got but unhandled exception type mapped list iterable is not as a subtype of list feedback okay so that is a mapped list iterable okay so let that's not exactly what we wanted so what i'm going to do i'm going to run let me get rid of this i'm going to say json feedback dot for each and we are going to say element and let's see what we have if we do it like this let me clear this all comment this out save and restart the application so we got the data that's perfect the next thing which we want is we want this to be loop and get a single values for everyone and i guess it's working just to confirm i'm going to just cut this out and type something in here this is next i'm going to save that restart the application and let's see if we get this print okay okay so i can see this is next yeah so this is working we are getting what we wanted so once we have this element let me just make sure we have what we wanted so after this is next we have a value which is from profile pic to the end of it with source url with yeah with all the values which we need so now what we can do we can create a new model we can say feedback model feedback model is equals to new feedback feed back model and i'm going to say feedback feedback model dot name is going to be equals to element then name uh is that correct yeah okay feedback model dot feedback is going to be equals to element and what is the key for the feedback it is feedback next we will say feedback model dot we have the feedback we have the name we have the profile pic now the element l e mend then we will provide the key now for the profile pic it is profile underscore pick so i hope you remember that profile pic next we want for feedback model dot we have the source i'm going to say element it's going to be element and then we will provide the key which is source so we have one two three four one is more feedback model dot source url is going to be equals to element then source url that's done uh don't worry about these brackets single and double both are going to work okay once we have the all these values from the element saved to the model i am going to save this model inside this list so this feedbacks and i'm going to say feedbacks dot add feedback model now i want to make sure this is working fine so i'm going to go and print length okay length th gth of feet backs just want to have it big enough or standing out feedback.length and i'm going to save that with a semicolon and save that and restart the application okay let's see so the first thing will be we will be printed with all the json feedback we are receiving and as you can see we have the feedback list to be five that's good and i guess i'm printing that inside the loop that's why it was printed every time so now i can get rid of it because we are getting the values now we have the values from the api congratulations next step is to just show that in the application we are very close guys so i hope you don't get you know lazy and wanted to watch some movies on and all you know today's sunday so anyway when i'm creating this video but yeah um so yeah now we have the image here so without waiting any further let me just show you this particular tile okay i'm going to go inside the body container create a child then a list view dot builder this is going to take two things first is the item count count and that is going to be feedback what have we named its feedbacks okay feedback start length then i'm going to say item builder what happened it's not showing me suggestions anyhow you don't need that i'm going to say context and i'm going to say index then i'm going to say return the title so that tile is feedback type okay i'm going to provide all the different values we have so i'm going to say profile pic are these named parameters i do think so why is there problem not sure so i'm going to first save it we have an error let's move on and provide the values profile pic it is going to be equals to feedbacks index so feedbacks is actually a list of feedback model by mentioning the index i am getting a model from that model we want profile pics so i'm going to say profile pic i hope you understand this line i'm going to paste that five times i'm going to say name i want the name i'm going to say source i want the source um what do we have then will i want the feedback feedback feedback i want the source url i want the source url i'm going to save that and you can see we have the images of all the different people right over here okay so we are fetching the data from the google sheet let me just complete the ui part and you'll be good to go so first of all what i'm going to do now is i'm going to give a different size so i'm going to give it a wrap in a container provide a height of 40 width of 40 and save that to provide it a circular border radius i am going to wrap it inside a widget um i'm going to name the it's actually called clip r right this is used to provide the border radius so i'm going to say border radius border radius dot all because i want it from all the sides all the corners especially four corners and i want that radius radius dot circular i'm going to go for 40 i guess or maybe something like that so that's fully circle okay you can see but we have quite a lot of padding from outside so i'm going to provide that now so i'm going to go over here i'm going to say padding edge inserts dot all and i'm going to provide around 16 padding that makes it some good now what we want is at the row at the side of it we want a column in which we will have the name and source okay so i'm going to go outside this container and i'm going to create a column because we want two widgets which is the name and the source to be one above the other so this is ending right over here so i can start the next one from here so i'm going to say column column will have children the first child we want is actually the name the second channel we want is going to be the source now we are not directly showing the source but i'm saying from and then i'm saying the source so if i will save that you can see we have it a little bit of a spacing will be good enough right so let me just provide that so i'm going to use a sized box i'm going to say okay width width to be around maybe eight so that we have some space maybe 16 i guess 16 will be fine we want to align these text in the start so i'm going to say column cross axis alignment cross axis alignment dot start now you can see they are starting from the start next we can play with the little bit of styling on them i can give it a style texture style maybe font size do something like 16 or something um i don't think font size is required for this let's let's just give this style to the source so that you know it just stands out a little bit text style i mean the name should stand out that's why i want to give the text color to it to be colors dot gray right so that's basically that moving on once we have that we want this feedback we don't even have a feedback for now so we just have created the upper section of it now let's move on to the line number 100 uh this is the one okay so i'm going to say one thing that is over here i'm going to create a text and that text is going to be nothing then the feedback then i'm going to provide a little bit of size box a height height of around 16. and size box sized box what happened size box okay if i save that you can see we have this just to make sure every feedback is aligned from the start i'm going to go over here to the column cross access alignment cross access alignment dot start and i will going save that so that's all we are fetching the details from the google sheet if you are interested to learn how to push the data to google sheet from your flutter application i have a video on that i will pin it down in the cards which you will see at the top right corner or you can see the it in the link in the description if you like the video make sure to give it a like and please share it with other people and i'll see you in the next one

Channel: Sanskar Tiwari

Views: 32,450

Keywords: flutter google sheets, google sheets flutter, fetch data from google sheet to flutter, google sheet database flutter

Id: RjQuPzn3dsg

Length: 43min 4sec (2584 seconds)

Published: Sun Nov 22 2020