OK so let's work on our maß detail screen and then we have the GOP tells and joke is.
OK.
So inside here this is where things start to happen.
It is Master Detail Screen state or screen.
So what we need to do here before we do anything.
I'm going to create a static constant here calling it what I call this tablet break point.
I'm going to give it a 600.
So this essentially says that anything less than 600 is considered a screen size of a phone but anything
greater or equal to 600 is going to be in this case a tablet.
OK.
And then here I'm going to just pass create a joke a call is selected joke as such and let's go ahead
and import our joke objects there.
So it's just a joke object as you can see there.
OK.
Now before we construct the master details mean we have to create different kinds of layouts depending
on whether we are on portrayed mode or landscape or a tablet or phone.
OK.
So to do that we need to create two different layouts.
Don't worry it's not going to be too much right because this is just the thinking that we have to have
in our minds.
Now remember this is just one example.
But if you think in this terms when you create your applications you have to realize that you have to
adjust accordingly to what you are trying to build.
But if you follow this process it should all work out OK.
So very good.
Now what I'm going to do I'm going to create a widget type function here I want to call it build more
bile or mobile lay out such a pull on site here for simplification so this one is going to build mobile
and this widget here another one's going to be build a tablet.
So we have these two functions there.
The first one.
Let's construct it.
So for the mobile app out something like this what do we need to do.
We need to do a few things.
Well the first thing we have to return notice we have to return either one of these will have to return
our joke listing because our joke listing is just lists our jokes so it doesn't think about OK is this
big as a small you know just doesn't know it just lists our jokes and then our joke details just shows
the details of our joke.
However when we create our joke detail because we know the way it's going to be presented it has to
do with whether we are in tablet or on the phone and also whether we are in landscape or in this case
portrayed.
This is why we passed the is Table way out as a bullion.
You see the connection here.
So each class as intended has to do only one thing.
And if you put all concepts together then you create the application is it makes sense.
OK.
So let's go back to our massive detail here.
So what we're going to return here is we turn our show listing like that.
And of course we need to pass a few things but for that we have to import it right.
So we have it very good.
So here are listening requires a few things.
It even tells us here well what does it require sir.
And are those arguments look at that requires a joke callback.
Very cool.
Remember this.
So this Joe Cole back here I could just pass in this case.
I'm going to say Joe selected that.
OK.
Very good.
So there we go.
When we create our joke listening need to pass our call back so we know exactly what's going to be happening
what are we passing when as we listen to the callback of the job.
OK.
What is it in this case going to pass a joke object call this joke selected.
OK.
That means when that happens we're just going to go and say navigator going to use push.
And we're going to pass the context.
We all know that.
But most importantly we're going to pass a route.
OK.
Now out there is different ways to create routes right this route.
We're going to create here called is my Tiriel route page route as they call it and we're going to build
something with it.
Now there's a lot of things you can pass with RMI till your page Froude.
But the first thing I want to do here is obviously I'm going to pass or build context as such
and then let me put my call in there.
Very nice insight here.
I am going to actually return because it requires it return something because remember we are routing
ourselves to another page right when we are on mobile here.
Click we want to go to another page but as we go to these Another page that's open we need to pass our
object.
This is why are we passing a joke selected object so that we can get the joke and the punchline and
all that stuff.
OK.
So when I return what.
Well I'm going to return a job detail right because I'm showing.
And that's what Jodi tells us.
OK.
So my call in there and let's go ahead and import that.
OK once we have our job detail Well the job detail there's a few things need to pass.
Remember we need to pass this to here table lay out.
We're going to make it false.
Why.
Because we are on mobile so hey we say it's not.
Table out o tablet lay out I should say it's false because we are mobile.
We are constructing the view for the mobile very core.
And for the job we have to pass an actual object Jode which is what we just said a joke selected.
We could have named it whatever we want.
Just said joke doesn't matter.
So now going back to a joke member this asks OK if this joke that I'm going to show in the details.
Is it like in a tablet lay out if no.
Well OK.
So it knows exactly that.
OK.
I'm going to be viewed as a phone.
Lay out that's all.
And then create the details as we created earlier.
Love this.
This is great.
Very cool.
Well that's it.
That's about it for our joke here so let me make it all look pretty and we're going to do the same thing
with our bill tablet.
We are going to return right away they return a row such and for that children.
Where is my calling they're going to go ahead and put it flexible now.
Why are my doing this.
Well I'm doing this because I know that I'm going to put in this forum because we're in tablets.
I'm going to create a left panel like this.
I'm going to make it so that it's flexible because I want to divide the screen so that we have this.
What's happening here.
Right to the left to have list and then to the right we have the details.
OK.
So for that I'm going to use a flexible because it allows me to divide the screen that's all.
So what I'm going to do for flexible here when I pass our flags pass one meaning I'm just going to use
one side.
OK.
And I'm going to pass as a child.
I'm going to pass in material like this what is a.
It's just a view that is material type which means we can add canvas elevation color shadow and all
this thing.
All of that really is just so that we haven't see this line here.
So it differentiates from our list from the details.
OK.
It's just it just a visual thing.
We don't have to do it but this is better because otherwise everything looks like it's in one page which
it is.
But this is just makes it better.
OK.
So we create our material here because we want to put it elevation so we have this shadow happening
there.
OK.
The bigger the elevation the bigger the shadows I'm going to put her about 13 at 0 for elevation and
then inside I'm going to put our child.
Well it would be our child.
Well it's going to be a joke.
Listening again Ah look at that.
Now things are required.
Right.
Because as we create just like we did here when we pass out a joke listen we have to pass the callback
right.
Methadose called to then do things for us.
In this case I'm just going to go ahead and pass of course called this job.
Why not.
Doesn't matter really.
And then light that well inside here I'm going to say set state.
Why.
Because I'm going to be.
Each time we click we are setting the state of this view with changing stuff right.
That's why we are setting the state.
Ah I remember.
OK what are we setting the state.
Well I'm going to call selected Joe.
He's going to be able to joke.
So whenever I'm passing here he joked and I'm passing you know a callback.
I'm going to put it in our selected joke object.
That's all.
Well to recreate the selected object joke here.
Very good.
OK.
That's all for now.
Each time we click it goes ok.
The object is being passed from our list is going to be able to select the one which means I can use
it to actually put things in my details.
OK.
We're making progress here folks so once we have that well there's another one we need to add.
Let's see instead of a joke.
I have another one that I need to pass which is a joke selected.
I'm just going to pass elected joke like this.
So it knows exactly which object that needs to be passed.
Very good.
OK.
Very nice so now I'm not done yet.
So after my flexible first one here I'm going to pass another flexible.
This is where again I'm going to have the details showing.
Well I'm going to put flags in this case going to be three.
So notice we have three here and we have one here Toro's going to be.
If you notice correctly I mean roughly is going to be one to three.
And then the rest is four.
So we dividing our screen in four columns we're saying here the color of our visible screen is going
to be this list and then the three quarters that are left.
It's going to be the description or the details.
OK.
That's why we're going to put here three and then four child again the same thing we did previously.
Pious details which I'm going to make it true right for because we know is tablet lay out.
Yes it is.
What is the joke.
Well is is select a joke object that we've been passing around.
OK so now we have our bill to tablet lay out and we'll have our built mobile lay out.
That's it.
Now not really because those are just objects or those are just widgets that we created functions for.
Right now we have to return them here.
This is where the view is returned.
Well before we do anything I'm going to create another widget here type instant you know and can call
this content which we're going to be using in a second.
OK.
So at this point we are pretty much good.
So we could literally go and just pass our content or depending on which case it could be absolutely
out or it could be the mobile way out but we need to do a few things here.
So this is where the magic works.
So what I'm going to do another thing I'm going to put him on to say VAR or this site going to use this
class called Media Querrey media Querrey is really is a class that comes with flatter that allows us
to access the size of our screen and so many other things that we may need to know as we build our application.
So this is the crucial part media Querrey.
So I'm going to say media Querrey as such data going to pass of course our context.
What's new.
And then I'm going to look at this.
I can go AXS orientation accessible navigation always just 24.
I mean notice the media Querrey knows a lot.
In fact if you want to know more I'm going to say command click here and you can read more about it.
OK.
This is very cool right.
It knows a lot of things.
Go ahead and read on your own time.
Very cool.
So going back here I'm going to see Dot what I'm interested in is the size.
Look at that.
It even has shortest side of our device.
OK.
So this is why it will determine whether we are on a tablet or on the phone because on runtime it will
definitely right away no.
OK.
We are on the phone because it's not 600 always less than 600.
No we are not on a tablet because it's greater or equal to 600 units.
And where to get 600 comes from you just google on line.
That's the Usually the breakpoint as they call it between a tablet and what's considered a phone.
Right.
So if it's less than 600 then it is considered phone greater or equal to 600 than it is considered a
tablet.
The shortest side of the device.
Right.
So in this case here what would be the shortest size or site would be this particle.
Now once we have that I'm going to also create orientation right because I need that.
And when I say media Querrey again a dot of context Dot I'm going to say orientation.
See we can even get orientation.
All of this is at runtime.
That's the beauty of all of this.
All right so once we have that I'm going to go ahead and see if in this case I'm going to say orientation.
OK.
Is equal to orientation.
I can call orientation like is portrayed and shorters side is class then tablet breakpoint in that case
I know that this is mobile.
OK so content now look at this what content Well this widget here which we are going to add something
to it.
We're going to pass what our build mobile lay out which we created here.
It's a widget therefore we can put it in a widget variable.
The reason we're putting on a separate verb was because we want to be able to use that.
OK.
All right so there we go.
So if your orientation is portrait like this right and shortest side is less than tablet break point.
Right.
We know if his last that means say what it's going to be considered a phone.
Then we know the content has to be build mobile way out.
That's it.
OK.
I can say now else.
Anything else in this condition.
Going to be what it's going to be tablet which means content.
In this case will be given build tablet lay out once we have all of that.
That means now we can return scaffold as we always do and we're put up at bar
to put a title here see text
jokes.
And for the body.
Why am I going to put content.
And we are done.
That's it folks.
We are done with our app.
This is the crucial part right.
We get the short side using media Querrey right orientation using media Querrey as well.
We notice media choir as you said who knows a lot about the device itself internals of the device which
is very important.
And then we say if orientation and we say is portrayed right we can actually use this static class here
or in some way not static.
And has portrait or landscape and gives you all the information the beauty right and sure site is less
than tablet breakpoint that we know its mobile.
We build our mobile layout else we build our tablet layout for a body here in our scaffold we pass Konting
which at this point will know which content to show and thats it.
Now the moment of truth I know we haven't run anything yet so I'm going to run this on Android first
so I'm going to go ahead and run this.
If all goes well they make a lot of mistakes.
We should be able to see an app that on portrait will behave differently than it is and landscape very
Go look at that very core we can click on one.
Very cool.
Now what happens if we flip it like that it went ahead.
Look at this.
Isn't that amazing.
So you were able to see you were able to build a very simplistic application but not so much simplicity
because now you can see that we were able to direct at runtime what should be shown.
I don't have a on Android I don't have a tablet here but I'm going to run the same thing on a tablet.
I was tablets for you if you're on Windows you can create a an android emulator that has a tablet and
then check it out and it will still work OK.
So just to show you again this is the app that we just created.
I'm going to go to air stop this and run on air and look at this.
Ah no joke selected.
If I select like that very very very nice indeed of course you can change the background color.
That's not the point in all this stuff.
Like you saw in the previous app that I was showing you but you can see the idea here is the same.
It is very very very nice.
OK you can go ahead if I wish to do so.
Change to this mode.
It still looks good.
Either way uses all of our capabilities right of what it knows about the device and changes accordingly.
Of course that would work.
Also an iPhone here in fact for completion here I'm going to run it on iPhone as well like this click
and shows like this because it's portrait.
And if I were to go and there we go very nice.
So all of these apps are behaving differently depending on where they're running.
There we go folks.
Very nice.
So what I really want you to get out of this is that in order for you to create reactive and adaptive
layouts you have to use media Querrey so that you know which device is hosting the application whether
the device is on landscape and portrait and all this stuff.
It's not a lot of work per say for the results that we get.
OK.
It takes a little bit of thinking a little bit of tweaking and making sure everything looks good.
This was a very good example in my opinion and you can see that from here you can take all of the applications
that we've created and mold those applications so that depending on which lay out that the user is looking
at they can change as well like the application can automatically change so that the user can still
have it very clean and usable intuitive application at hand.
OK.
So that is your challenge now.
OK folks.
Very nice.
Thank you for your time.
I will see you next time.