So which kind of application will we build in this module here?
We'll build a meals app, an app where we can view some recipes, favorite some recipes and also filter recipes
and for this in this application, we'll need some navigation.
We'll have our header there with some title in the middle and with a menu button here on the left which
allows us to open a side drawer to which I'll come back in a second
and at the bottom of this page here, we'll have tabs,
we'll have two tabs - one for all meals, all recipes and one for our favorites which we'll of course be
able to add in this app.
Now on that all page, we'll have a grid of categories,
so basically something like Italian, exotic, maybe German food,
so basically different food categories
and when we tap one of these categories, we'll be taken on a second screen where we'll then have a back
button at the top to go back with another title, the category title
and on that screen, we'll then have the recipes.
So there, we'll have multiple such cards with let's say an image, a title, some extra information about
the recipe like how long it takes to create it and so on,
so when we click the back button, we're of course taken back here.
Now that's one part and that's all where we're on the all tab down there,
so when this is the active tab. Now we're not done in this flow though, of course we can tap a single recipe
and that will take us to yet another page here where we can view the details about this recipe.
So where we also have a header and an image of this recipe and also have a back button which takes
us back to this page here, where we then also have more information about the recipe, like for example
the ingredients which is such a list and then also the steps it takes to create this recipe, like cut
onions and so on.
So that's the information about the recipe we have here and we can go back.
Important, we'll also have the functionality to mark a recipe as a favorite there, for example here
in the header, we could have a star icon which allows us to do that,
well that's an ugly star
but that's something we could have here to mark a recipe as a favorite and we'll add it to this favorites
list because that's the other tab we got here, right?
That's the second tab we got here. When we press this tab here, we're basically switching the tab on this
starting screen where we have that menu button,
we still have our tabs here with all and with favorites
but now let's say favorites is the active tab.
Well in this case if favorites is the active tab, then here we essentially see a list of recipes which
looks just like this list here of recipes when we click on a category
but now only with a list of recipes with the recipes we marked as a favorite.
Now we can still have a single recipe done and we're taken to that recipe detail page up there
and if we now would press the back button, we'd of course go back to this page,
so the back button takes us to different pages depending on where we're coming from.
Now what happens when we press that drawer here though, when we tap this menu button? What happens in this
case?
Well in this case, we open a side drawer which allows us to go to the meals app which in the end is this
app we're starting on, where we have all the favorites and also the filters screen. Now filters is a brand
new screen which we have in this application, where we also have a menu button to go to that same
menu here and possibly go back to the meals page and on filters, we can set filters like glutenFree
or vegan and we'll have some switches here which allow us to toggle these options on and off
and we also have like a save button here at the top which allows us to then save our selection and
then we can go back and the recipes we see here will be filtered by our selection on the filter screen.
So this is the application we're building and now this sketch here shows two things -
for one, my drawing skills aren't that awesome. Shouldn't matter too much though because this is thankfully
not a drawing class.
The more important thing this sketch shows is that we'll have a lot of navigation,
we have tabs,
we have a side drawer and we have forth and back navigation, so we'll go back and forth between pages,
we'll have to change the title in the header based on where we're going, we'll have to change the content
on the screen based on where we're going and therefore, we need a powerful navigation solution where
we don't just use if checks as we did it thus far in the course. Not only because that would be very
cumbersome to write but also because we want these beautiful animations, these transitions between screens
and that's something we thankfully can add in a relatively easy way.