Passing Data Between Pages (Parameters) | FlutterFlow University

in this video we're going to talk about how to pass or send data between Pages now why would you need to pass data like if you already have data on one page why would I need to send it to another page well let me show you two examples so here I've got a list of users and when I click into any of the users it brings me to their individual page so I need to pass the user data from the first page to this second page okay here's another example so here's a rental example so I've got a bunch of properties here that I might want to rent and I select a date here and then I like this one and you can see that that date is sent to this page because when I booked this property I'm going to need to send along that date with it so I had the date on one page and I needed to pass it to this page so why do you need to pass data well there are two main reasons either you have more data than you're displaying on one page that was like our first example with the users so I had all that data I just was only displaying part of it and on that next page I wanted to display all of it so then I could so I passed it and then showed it the second reason to pass data is when you're gonna use that data to do something else so maybe you need to send it off to get more information from an API or a database or maybe I want to make some mutation to that data Maybe I'm making some sort of calculation so let me show you how to set this up in flutter flow here's the overview I've got two pages and to pass data there needs to be be two steps I need to set up the sending or passing data on the first page and then I need to set up the receiving data on the second page so how do you do that well the first step is to set up the receiving and we call that a parameter and you can have multiple parameters as many as you want and the next step is to set up that sending and you do that through a navigation action so that's it just two steps so let's do it okay so I've got two pages here page one and page two so let's just send some data so the first step is to set up the receiving these parameters and you get there by either clicking out here on the canvas or just selecting this root widget here and then you'll see this page parameters that is the thing that will receive the data okay so let's add one here and add parameter and you give it a name so I'm just going to say this is first name and then you select what type it is and you've got all the different types of data you would expect and for this we're just going to do a string now you can select whether this is a list of strings and whether this is required if it is required then when we go to this next step with navigate it'll require us to set that value and then finally we have the option to set a default value and this is for the situation if the value being passed is either null or an empty string now of course you don't have to set this but keep in mind that if you bind this parameter to something on the page that can't accept null like a text widget that you set this default here or you set it in the text widget when you do that binding so I'm just going to set in name right here confirm Okay so we've got that set up the second step is to set up the sender and that's just through a navigation action on this first page so let's do this I've got a Comm here let's just add in a button and give it a little breathing room and this is going to be a navigate action so we'll come over to our action flow editor add an action add this navigate to and we're going to the second page and down here we have parameters now if we didn't do that first step we can define a parameter here that'll just bring us over to this second page into our parameters where we can add a parameter or add additional one if you've already had it set up but we already have the one we've set and so we can just come back to this page and we see this pass option and we only see this here because we've already defined a parameter on that next page if we didn't we wouldn't see this because we don't have anything to pass yet but we do now so let's just click this and it adds in the parameter that we have that first name so we want to twirl this open and if we had multiple parameters we could see them here and we could select a different one and then we add the value in here that is what is being sent what is being passed from this page to the next now if you put something in here this would just be a hard-coded value that we're sending over here but most of the time it's going to be a dynamic value okay well we don't really have any Dynamic values here so let's add one so let's just put in a text field right here and let's drag it above here and let's just give it the same padding as before okay so now we've got this so we can come back to this parameter and instead of hard coding that we're going to set this by binding it and we want it from here which means it's from a widget State now one of the cool features of flutter flow is that you can actually just click on this and it'll bind it that would be the same as going in here opening this widget State drop down and then just selecting that beautiful and confirm okay beautiful that's all set up so we've received it on our second page by so we've received it by setting up our parameter on the second page we've sent it through a navigation action but we're missing one thing and that is while we sent it over to this page we won't be able to see anything because we're not doing anything with our value that we're being passed so let's just add some text in here so let's add in text here and let's just come over to our column and stretch it out and come over to this text here here and just give it a center so it's in the middle and make it a little bigger beautiful okay so now we want to bind this value here to a page parameter that is that's the bucket that's going to catch the value that we send that first name beautiful that is we just bound and I'm clicking out here on the canvas and if we just cancel out of here we just bound to this page parameter right here this value is bound to this okay beautiful let's test this out all right I'm on page one and I'm gonna pass my name right here and beautiful there we go and that's the basics of how to pass data between pages but let's look at the two examples we started out with to see some other common use cases so if you remember in the first example I had a list of users and when you clicked on these users you went into their particular user page and these users are coming from a firestore collection of users that I have with just the standard data you would expect out of a user okay so I've got a list view here and it's bound to that users collection so I'm just displaying all those users so here I'm getting all of the user documents but I'm only displaying their name and image now when I click into it I'm displaying more information like their email so what I want to do is pass that whole user document okay great so let's go through our two steps first let's set up our parameters so let's go to that second page the profile page and you can see here in the page parameters is that I've got one set up here and it's of type document that is a document from firestore that's what I'm expecting to receive okay great then let's look at how we sent it so we're back in our users and you can look in your widget tree here for this little green icon to see where our action is bound and it's bound on this container right here and you can see we've got a navigate action and our parameter right here so if we twirl that open you can see where this is bound so let me come in here again and close this up so you can see that we've got this user's document and when I twirl it open I get the option to send that whole document so the whole record of the user that's what I want to send and it knows that because I've already set up that parameter on the next page okay confirm beautiful so that's all set up and of course I have to display that data so in my profile here I have that bound to the image right here so if I come in and you can see this path down here and let's just come in and look at it again I want to bind it to the page parameter so I've only got one it's this user record here and when I click that I'm getting the document property and it shows me all of the properties available that is these are all the fields that we looked at when we looked in the fire store in the collection great and it's the photo URL beautiful and it works the same with all the other fields we have bound so I've got a display name here and when I scroll up same thing get document property and here it's not the photo URL it's the display name beautiful and that's passing a document let's look at our last example so our same two steps we've got this page here which is our first page and our second page is this property page but what are we sending on this one but we were just sending that date okay so on the second page I should be receiving a date through my parameters so when I come into my page parameters here you can see I'm sending two things here first I'm sending a document same as with the users that's where I'm getting the image and the address of the property but I'm also sending a date time value so there we go we've got it set up and of course we have it bound over here and we gotta send it so let's look at that we can see that we have that navigate action on this and we've got our date parameter being set by this widget state of date picked which is an action on this button right here and of course we are passing the document right here and you can see that it's coming in from this properties document because we have this bound to that collection and that's how to pass data between pages in flutter flow

Channel: FlutterFlow

Views: 44,971

Keywords: FlutterFlow, No Code, No Code Tools, How To use FlutterFlow, No Code App, FlutterFlow App Builder, No Code App Builder, FlutterFlow University, flutterflow tutorial, parameters

Id: F_4O1uWm22g

Length: 10min 27sec (627 seconds)

Published: Thu Aug 17 2023