Showing data in UI - Free Flutter Course 2022

once we do that now instead of printing out let us try to save these in a variable let us say a string quote variable which would have this code text saved inside it i'll cut this out i'll paste it here and end it off with the semicolon i'll get rid of this print statement and i'll also have a string author variable which should save the name of the author of our particular quote so let me do that finish this off with the semicolon get rid of the print line now we are able to make this request get some data pass it and save it to two variables we want to now send these variables to our second screen and how can we do that let us save this file and come back to our second screen so inside our second screen we have to create two new variables up here let us call this string code let let us like quote text let us call this code text and i'll also create a new variable called author name i want to show you like uh how this particular value would be seen so i'll i have named these variables different now inside our constructor we'd also need to create uh like we'll also specify like whenever this particular page is screen is called we need to pass in these values so i'll have to type in this dot author name and this dot code text here and i'll have to make these values required because i want to use them on my second screen and they should be available to me when i want when i'm like creating this second screen if i'll save this file really quickly you'll see a error appear on the home screen because we are navigating to this page but we haven't passed in the values of code and author so let us specify the code text which you can see is the property name and what we value we want to pass it we want to specify it as quote similarly we want to do the same for author name which would be this author that we get so i'll type in author and once i save this file i'll have it running i can just hot reload my application now you will see like once we go to the second screen we will have this uh we'll have this code text and author name here but we haven't used it so let us quickly use these values as well inside our scaffold i'll create the body which i'll set to this column widget since we have already talked about uh layouts in flutter you should understand like what we want to do we want to show uh the code text on top and the author name just under it so i'll create two text widgets which should take in some data which would be the code text and then one more text widget which would take in the author name once we do that i can save this file as well it should do a hot reload let us come back to our app and once i click on this go to next screen it should take some time but you will see like the code appear here and the name of the author so we are able to do this successfully we are able to get data off the internet and show it inside our flutter application we are navigating from one screen to another now the last part left to it is just to make this much beautiful like we want to make it prettier and with that we'll have like a complete application which is really cool so i'll come back to my scaffold and give it a bar because we want to be able to navigate back if we want to so i'll save this second screen you'll see like a app bar appear here

Channel: Aditya Thakur

Views: 776

Keywords: free course, flutter, app development, dart, cross platform, aditya thakur, latest course, programming, flutter setup, first flutter app, new project, flutter create, demo app, counter flutter, http, api, quote api flutter, ui update, flutter ui clone

Id: AkQc1UgsyYg

Length: 4min 3sec (243 seconds)

Published: Tue May 03 2022