Rendering Pages

[00:00:00]
>> So the next step is to create the other two pages. So instead of rendering text, I wanna render here a menu page, and I wanna render an orders page, order page. What is a page? A widget? So for organization purposes, I'm going to create them here, and if you want, you can create more folders within lib.

[00:00:27]
More packages. Every folder is a package. So I can create one for pages or page views or page widgets or whatever you wanna call this. So I can drive this one, Okay? And also I'm going to create junior files here menupage.dart and orderpage.dart. And for now inside, I'm going to create a stateless widget with that name, like the order page.

[00:01:01]
Every time you do that you need to import, okay? So be careful because you need to import material dart, and that we get rid of all the hundred errors that you will see. And menu page, I also need to create a stateless widget. Manual page, okay? Makes sense?

[00:01:21]
And also remember to import material dart. So now main dart is giving me an error because menu page, an order page are in a different package, so we need to import, From our pages folder. So now we are back here, yeah, menu and order are empty but it's working.

[00:01:49]
We already have various set up all the files that we need for now. Do you have any question? Yeah.
>> Max, I'm sorry if you repeat this.
>> That's fine.
>> The index on that bottom navigation bar. Does it automatically create new index numbers for-
>> No. This is a variable that I have set.

[00:02:10]
This one is a state variable. How do I know it's a state variable? Because it's a property within my state class. I'm the one changing it, where? Here in the on top event of the navigation bar. So the navigation bar will execute you a function. Say, hey, the user has just tap on a different icon.

[00:02:32]
That you're getting that new index and you're changing your own variable with it. So I'm taking here, the new index received by argument, and I'm saving that in the selected index but by defining a new state. That set state is the one that is making the magic, and it's going to automatically re-render your widget.

[00:02:54]
And that's why you see that something is changing on the screen.
>> But there's no real index. I mean, menu is not 0, office is 1 and order-
>> Yeah, the order is like an array, so it goes for the menu 0 verses 1. You don't usually find that anywhere.

[00:03:11]
Because it's an index, it will give you automatically from 0.