Creating the Offers Page

[00:00:00]
>> So now that we have the swatch, now our app has something. Okay, so the next step is, I'm going to start designing what is known as the offers section. So our app we have three sections. We have a menu. Remember we are a coffee shop, so we are selling coffee.

[00:00:18]
So we have a menu, we have a section for offers. So you can see the recent offers, and then we have an order. Where you can, from the menu, you can add items to the order. That's kind of our roadmap, okay? For the app. So we're going to start with that offers section, and for that, is the first time where we're going to create a new Dart file.

[00:00:38]
I mean we can continue working on the same file but it's not actually the best of the ideas. So I'm going to create a new file. Right click your file and let's call this, theofferspage.dart. It's empty, nothing is there. And what do I need to create here? A widget.

[00:01:05]
So I'm going to start with an estate less widget, and let's see later if I need a state fold, okay I don't know yet. So stls, enter on the name. Offers page. Okay, I can save and when I didn't save, I have arrows everywhere. What's going on? We need to import.

[00:01:30]
So we're going through these many times. Because it is the first time, I wanna emphasize on one particular thing here. When you go over the error you click here, and you can import the library. But if I zoom in a little bit, you will see that I have three versions for import.

[00:01:47]
I can import Cupertino, Material, or Widgets. Widget is some kind of a generic package that does not contain all the widgets just the basic one, padding, okay all of the basics that has nothing to do with the UI toolkit that we're using. And we are going to use material, okay.

[00:02:08]
So most of the time you need to import materials or dart and that will solve all the other errors. Okay if you pick Widget, it it will work but at one point you will try to use one widget and it will say that it's not there because you need to import material.

[00:02:23]
So material is a superset of the widget package. Okay, I'm going to create that's going to be the page, the page will contain several offers. I'm going to create another stateless widget, stls, with the name offer, just one offer, okay? So we're going to render one offer. Makes sense.

[00:02:48]
So do you have any question at this point? Nope. Okay, so we're going to work with the offer first. So what do we need in the offer? The offer will have two properties, a name or a title and a description. So because it's a property, it's a property of the class.

[00:03:14]
So properties are typically final. So I don't want anyone to change them, okay? So, finally remember, it's the key word for immutable variables. So I'm going to create here the title and another property for the description. If I have two properties that sets a string and they're not accepting news, remember nullable types.

[00:03:43]
It gave me an error because saying, hey, your final variables need to value and I'm not accepting news. So what I need is to add those properties in my constructor. How? Require these.title, require this.description. If I use a trailing comma when I'm saving it goes to a new line.

[00:04:08]
Remember the trailing comma will make the magic for a multi line experience. Makes sense? So now what I want is to add to that list, two text. One for the title, one for the description for my offer, okay? So first how do you do that? I need a layout container.

[00:04:32]
You always need a layout container, okay? So one can be a column. So I can return a column that has children. Okay? And we are going to start with two texts. So text, I will take the title. So these the title, we don't need this but if you wanna be more explicit where the description is going, it's coming from, something like that, okay?

[00:05:03]
These are titles, these are description. Here its complaining because hey, It's saying you don't need this, I mean it will work anyway but it's saying hey, you don't need this actually, as I mentioned before. So we have two texts there, so how can I see that on the screen?

[00:05:20]
We don't have a way to preview, which is individually like other platforms. So here, we actually need to put that on the screen somehow. So something that I can do, is if I go to my offers page, instead of a container, I can render one of my offer that receives a title and a description because I said so.

[00:05:44]
Okay? So this is my great offer ever, and the description will be buy one, get 10 for free. That's a great offer. Trailing comma, save multi line. Why it's complaining? Pay their cost, so quick fix. Adds the const, okay? So that's the offers page. But the offers page is still not on the screen.

[00:06:15]
What do I need to do to put it on the screen? Well, let's go to the main.dart file. And when we were rendering the homepage, the greet widget, I need two R, the offers page. As simple as that and now I can see my two texts there.