All language subtitles for 16. Passing Data Backwards Through the Navigation Stack

In the last lesson we saw how we were able to capture the value that the user typed into the text field

and we did that through listening to the unchanged property.

So whenever the text field changes it triggers this anonymous callback and it passes in the new value

which we were able to print into the console.

But instead of printing it into the console let's store it in a property.

So let's create a new string property called City name and it's going to start out empty.

Now when our text field changes we're going to set the city name to equal that new value that the user

typed into the text field and now all we have to do is to try and pass the city name back when the user

taps on the Get whether button.

So inside these curly braces we have to somehow pop this city screen off of the navigation stack and

pass that city name value back to the previous screen.

So far we've only really seen how to pass data forward passing a piece of data forwards to a state object.

We can do that by passing it to the state full widget and then fetching it through the widget property

in the state object.

But now we have to figure out how to pass data backwards.

Well let's first add aunt navigator dot pop method and I'm going to hover here on this pop method to

show you the documentation.

You can see that it's got two values.

One is the context which is the current context and we always pass that in order to pop the screen off.

But there's also a second optional input which is a result.

And this is where we're going to add the value that we want to pass back.

So we're going to write navigated up pop pass in our current context or where we are in the widget tree

and then we're going to pass over that city name variable.

Now if you had more things to pass you could pass a map for example or even an object.

But now that we've passed this bag where can we access it in our location screen well if we take a look

at our push method you can see that it actually has an optional output.

It may output a future with any sort of dynamic type and that output comes from over here.

So when we popped it we passed something over.

Well that's going to be the output of our navigator dot push method.

So we can tap into it by creating a variable code typed name and we can set that to equal the output

of navigated up push.

So once the city screen gets pushed on top of the location screen then the user types in the value for

city name and once the screen gets popped off city name gets passed back as the output of our typed

name.

But remember this is of course an asynchronous method because you never know when the user is going

to type in the city name right.

So this is why it returns a future.

So if we need to use this type name somewhere a little bit later on then we have to make this a wait

for the result of this and which means that we have to add async to modify on pressed and you can add

the keyword async to anonymous functions like this or as we've done before to named functions a method

like so it doesn't really matter as long as you put it in front of the curly braces now that we've got

access to this typed name variable which comes from the user input from the city screen well we can

now use it.

So let's confirm that we've actually got something back by printing out the typed name into the console.

So now let's check this out.

Let's click on hot restart so that our app starts from the beginning so that we load up the location

screen.

And this is where of course our navigator dot push gets created.

So now let's navigate to our city page and here I'm going to add the name of the city that I want the

weather for and then I'm going to click on get weather which of course takes us back to the previous

screen and it's here where we get that typed name printed into the console.

Now that we've got our typed name here let's use it to actually fetch the current weather.

But let's first make sure that it's not no.

And we can do that by adding an if statement checking to see if type name is not equal to no.

Well in that case we're going to actually be able to use it.

And in order to use it we're going to call a method in our weather.

Dot dot but we can't use the get location weather method because that relies on getting the weather

based on the current location whereas we might be nowhere near the city that the user typed in to the

city screen.

So we have to create a new method here and we'll create one and we'll call it get city weather but it's

going to work very similarly.

We're also going to be using our network helper.

And we're going to be passing it a you are well that's going to be based off the open weather map your

arrow.

So let's take a look at the documentation for open weather map to see how we can get the weather data

based on a city name.

So the first one even is get weather by city name and you can see that this is how you would structure

your API calls.

So we have to add in a parameter name called Q..

And afterwards we set it to equal the city that we're interested in and then we also have to pass in

the app I.D. which we've already registered.

So let's format our U.R.L. here inside get city weather.

Let's create a var that's called U.R.L. and it's going to be equal to the open weather map you are.

But then we're going to add some other parts to it.

So we're going to add a question mark and then Q And then an equal sign and afterwards is where our

city name is going to come.

So for our get city weather method we have to pass in the city name.

So let's add an input for this method we'll call it city name.

And so that we can use it to form our you are well.

So let's add our dollar sign and put in our city name at this position and then we of course have the

tag on other parameters such as the app I.D..

So let's add are Ampersand or are and symbol and add our app I.D. parameter or you can simply just copy

this part that's in green as well.

It's exactly the same.

And make sure that you don't have any typos and then we're going to add our constant which is our API

key here as well.

And finally I still want my temperature to come back in Celsius rather than Kelvin's so I'm going to

tag on the.

And unit equals metric at the very end and now I can add my semicolon to finish off my U.R.L..

So now what I have to do is very similar to what we did for get location whether I'm going to create

a new network helper object and we'll call it just network helper.

And we're going to initialize it with that.

You are all that we created right there.

Now you can either do it like this in two lines or you can use what we did down here which is simply

inserting this line of code into right here.

Both ways work.

It all depends on which way you find.

Easier to read and easier to understand.

Now once we've initialized on network helper with the U.R.L. that we want to get data from then we can

call our network helper dot get data method and we can save the result of that into a new variable called

weather data.

So so far very similar.

And finally we can return our weather data as the output of our get city weather method.

And of course that means we have to change this into a dynamic output but not just any dynamic output

it's going to be a future dynamic output again exactly the same as before.

And now we have to mark this method as an async method because get data is asynchronous.

So in order to return it we have to wait on this to finish.

So let's add the await keyword here and that's all we need to do to set up or get city weather method

to be able to fetch the weather data based off a city name that we pass in.

So now let's head back to our location screen and inside this part where we've already checked to make

sure that type name definitely has a value.

Well now we can pass over typed name to our weather model which remember resides in a object called

weather.

But the data type is our weather model which comes from the weather dot dot and we're going to tap into

that method we created just now which is get city weather and we're going to pass in the city name by

using that typed name that we got back from our text field once we've gotten the weather data back then

we're going to save it inside a variable which will call weather data and because this is an asynchronous

method remember it returns a future then we should also mark this with an A Wait keyword because the

very next step we're going to pass this weather data to update you method so that we can update the

user interface of our location screen

and then that will go inside here.

And as long as weather data is not equal to null then it will try to get the values of our temperature

weather icon weather message and city name from it.

So now let's stop our app and run it from cold and now let's head over to the city screen and enter

a new city name.

Let's try Beijing maybe and click on get weather so it pops off the city screen and it takes us back

to the location screen and it tells us the weather currently in Beijing.

Now we can of course still click on our location icon to get the weather for our current location but

we can also change the city to any place that we can think of.

Let's see what it's like in Paris at the moment cool.

So the final thing that we just need to add is this button currently doesn't do anything yet.

And what it should be is more like a cancel button just so that when we get over to this screen and

we decide that actually I don't really know which city I want the weather for.

We should be able to head back and cancel the action.

So all that button needs to do is to pop the screen off without passing anything over so let's head

over to where that button lives which is on the city screen and it's right here in the flat button.

So at the moment on pressed is empty but we're going to change it to navigator dot pop and we're just

going to pass over the context and nothing else.

Remember that if at this point if we didn't check if type name is equal to no then we could potentially

get into some problems by trying to get the weather on a no value but because we're making that check

then hopefully we shouldn't be affected.

So let's run up again and let's check it so now if I click on the back button it takes me back here

without changing the city.

And if I click on this button it gets me the location data.

If I click on here it gets me the city data and my app is now working beautifully.

So I hope you enjoyed making this weather app with me.

And there's definitely a lot of improvements that you could make to this app.

For example instead of just getting the current weather for all location what about getting some forecasted

weather.

What about adding more widgets display more values on screen and you can check out all the cool things

that you can do with the open weather map APIs such as getting an hourly forecast or some historical

data or even things such as you the index and air pollution.

So the world really is your oyster and I'll leave it up to you to customize and update your weather

app if you want to.

But that's all from me for this module and I look forward to seeing you on the next one.