Welcome back in this video, we are going to look at how to navigate with an argument because once we
click on any of those news, we want to see the details.
Right.
So go back to the top news here, Namita Singh.
So it gives me the title here.
Raja Razzaq was probably the one who wrote this, so you see, we can go over and navigate to the details
screen.
That's what we're going to set up in this video.
And obviously, it needs to know which link we clicked on, so that's what the argument is going to
be about.
All right.
Let's start off by making each item clickable.
Therefore, we go to our top news item and the cool thing is we can just make the entire box clickable,
right?
So there is this dot clickable that we can add the clickable method.
And this will be not at this level, but inside.
So here, clickable like.
So then we can say what should happen once we clicked on something and I'm just going to call this on.
News clicked.
And I'm just going to call the method on news clicked, and therefore we need to pass it in here.
So I'm just going to add on news clicked or click, which will be a lambda expression with no parameters
and a unit at unity, not the game engine.
And then it will execute something.
So now we can.
So basically, I'm just creating a method here that we can now pass.
And I'm just going to use unused click.
So what we're saying is pass a new method here and then this method that we are passing, we can then
call inside of our top news item.
So that's a really like advanced technique, but it's super useful and very cool.
So in the top news here at the top level, we can go ahead and now add on news.
Click So here items.
So for every news or a top news item, we can now pass in the method.
So here there was this unused clicked that we just created, and we can now use the curly brackets if
I ever get to click them properly to now do something.
So here's what I'm going to use is my nav controller because it felt unused.
It was great out.
But now we're going to use it again to navigate so we can navigate.
We can say to which route we want to navigate.
So we're going to say to the detail route and Missy, because I played around with this, I call the
details screen.
So in order to be or to stay consistent with my application that I have prepared, I'm going to use
the detail as the name for that.
So in my top news, I'm going to route to the detail, but now I need to pass some information to it.
So how do I do that?
Well, I can use the dollar sign, dollar sign and then pass the new data ID to it, for example.
So this will give me the new status ID, which will then allow me to display details about it.
So now let's make this new data available, so we get the news data now on our detailed screen, so
to speak, right?
We don't really get it, but we need to change the details screen parameters here to also take in some
news data.
So now we're going to say, give me the news data when you create a detailed screen or you call my details
screen and then we can replace this text.
So go to top news with gold, the top news with some additional information for, for example, the
new state data.
This passed to us and used the author.
So now whenever we're talking to the details screen, we are going to display the author as well.
Now, in the preview, we'll get an error because it says, well, hey, you are not passing the news
data to me.
Please do so.
So what I'm going to do is I'm just going to pass some default news data to with nothing too fancy,
just me tossing Cleo Smith news with the title and so forth.
So just some data that we need to pass, otherwise our previous screen wouldn't work.
OK, so now I only passed the I.D., if you recall and also our composable isn't happy and so forth.
But if we look at our top news, you see I'm only passing the I.D. I'm not passing an entire object,
which is obvious because otherwise you would have to convert the object or make it see realizable or
things like that would be way too complicated.
So what we do instead is we say, all right, I'm only going to pass the ID and now you go ahead and
load the news for that ID.
And we can just do that in our mock data so we can just create a function in here.
Which will get the news based on the.
So get news.
With the News I.D., which will be an integer Nullarbor, so it could be empty and it will return and
use data.
So I want to make sure that it actually returns something sample return.
Top news list.
But first with the given ID.
So here curly brackets it that ID equals equals news ID.
So what's going on here does a lot of lambda code and stuff in here?
So basically, we're saying with this getting used method is called it needs to get an ID, which is
going to be of type integer another bill and it's going to return a new data object.
Then we're returning the first item.
So from our top news list, which is there's a list of mock data, we are going to return to first item
where the ID of the item that we're looking at has the same ID as our news ID. So if the new ID, for
example, is eight, then it will give me the first item inside of the top news list where the idea
is eight and it's fine to use first because we are using unique IDs where we don't have news that is
going to have the same ID as another piece of news.
OK, so that's why it's important to make sure that your IDs are unique, but in any given database
that you would use, this would be the case anyways, because this would be your key for your piece
of data.
We're going to look at that later on when we're actually loading data.
So now let's go over to our new setup, which is obviously very unhappy because it's trying to use this
composable detail with the details screen, but the details screen is only getting enough control,
but no additional details.
So what I'm going to do here is I'm going to change this detail and add a placeholder for the argument.
So here we are getting the news I.D. as well.
Right.
So this is going to be the new route.
And then we need to provide the argument type using the NEF type.
So here we are inside of the composable.
We need to pass arguments, and we're going to say what kind of arguments they will be, it will be
a list of never arguments where our new side is going to be the name.
So here and use ID and then we need to use a number here saying of what type this will be.
So I'm going to say the NAF type will be an end type.
So we're just basically saying, OK, we're getting use ID and we are saying the argument that you are
getting.
So this piece here, which has this news ID name, which is the same that we have here, and then we're
saying of what type it is and we're saying it is going to be a integer because the news ID, if we look
at it, once we are passing it here is going to be of type int.
OK, so now we get the arguments, and at this point, our nav back stack entry gives us some additional
information.
So let's use it.
Let's use this nav.
Back stack and entry object that we are getting, which is it that you just saw before I added this,
you see there, is this it?
So it will be this nav back stack entry that I'm going to create the ID of based on this nav back stack
entry.
I hope I set that correctly.
I get it from the arguments where I get it on the entry level, so I'm getting the integer with the
name of news ID.
So there's a lot going on here, but basically we're just saying whatever new side is, give me that
now and stored inside of this ID variable.
And I can use this ID in order to use this mock data method, get news to then load the news and pass
it to the details screen.
So we're saying, well, new data should be the mock data with the get news and it will be the new side.
And I actually just called it ID, which is this variable here.
So this will give me the news data object, right?
Because this is of type news data.
And now I can use this new data object to pass it to my details screen like so because my detailed screen,
as you recall, hopefully required a new data object.
OK, so now we're passing the news data object, and it will display in the text of the button that
we can then click in order to go back to the top news.
So if I did everything correctly, then we should be good.
Even though it is very tricky because we are working with strings and strings are always tricky so things
could go wrong, which is why I would potentially make sense to re name those or make sure that those
strings are going to be static variables that you stored somewhere in a in a single object or so.
OK, so now let's look at this.
Click on breaking news and see Raja Razzak from CNN.
Let's click on this beautiful image here.
What's up there?
That's Mike, Mike Florio and so forth.
So whenever we don't have an image, you see, it just uses to breaking news.
Default image.
Alrighty.
So that's how you can pass data using the NAF controller and jetpack compose.