Text & Layout Widgets

[00:00:00]
>> So now we are going to then start working with our application, the coffee masters application. And for that, we're going to start working with the main.dart file. So I will just hide the Explorer, so I have more space to see what's going on. This is a default template.

[00:00:21]
And to be honest, you can see it has a lot of comments, more than the ones that we typically want. So we can get rid of these comments at this point, just to clear a little bit what we see on the screen. Of course, it's a good idea to read those comments later to understand what's going on.

[00:00:36]
But I need to just simplify what we have here, so I'm going to delete everything we have. In fact, I'm also going to delete here from my home page, the counter and something else. But for now, I will just keep it. I'm just deleting the comments. Okay, just to simplify a little bit what we have on the screen, just a little bit.

[00:01:04]
So within here, within this class main.dart, I can actually create more classes, more content. Dart does not require one file, one class, or one class, one file, so you can actually put more than one class in one file. As I mentioned before, Dart requires a main function. So you're going to find within main.dart a main function, it says void main, and in this case is running MyApp, and it's creating an object of MyApp, and it's treating that object as a constant.

[00:01:46]
So actually, you cannot change that object later. MyApp, it's actually a class that you have on the same file. So in the same file, you have that MyApp class. So let's try to understand what these classes actually are. Flutter is heavily based, but really heavily based on the concept of a widget.

[00:02:12]
What's a widget? Something that decides how to render content on the screen, that's a widget. At least the basic initial definition of a widget. A widget, it's a class that extends from widget. But the widget class is abstract, so we cannot actually extend from the widget class. We need to create a class, I'm going to do this manually only once, just to show you a quick idea.

[00:02:40]
So if I have a HelloWord widget, I need to extend from one of the subclasses of widget, the simplest one is called statelesswidget. We will understand why it's called a stateless in a minute. So the widget has only one required property, the key property. So in fact if we look at the error, it's actually saying that we are not actually implementing all the methods and all the things that we need.

[00:03:12]
We need two things, we need the key property, the keys being used by the framework for the tree because it will create a tree of widgets in memory and each one will have its own key, its kind of the ID. But it's internal, so we are not going to set the value of those keys.

[00:03:32]
The framework will do that for us, but we need to have the space, the placeholder for that key, okay? So that's why you will see that all the classes will have something like this here, they are. What is this? This is the constructor so let me change the name of this constructor.

[00:03:50]
It receives a key, and it's passing that key to the the super class because it's mandatory, okay? So that's completely mandatory. So typically you will need a constructor in your widget class that receives a key and it passes that key to the super class, that's mandatory. And then you need also a build function.

[00:04:17]
Look at this, I've just typed build, and if I select the first option, it will populate this for me. There is actually a function or a method of my class with the name build, that they receive something known as a BuildContext, but we don't know what that is yet.

[00:04:35]
And it has this annotation of override, that if you know Java probably you're used to that. It's just an annotation saying that this is not just any function or any method, it's actually overriding the superclass method. And it need to return a widget, this is a return type.

[00:04:55]
So actually, we need to return a widget, so the build method typically returns a widget. For example, the simplest widget that we can use it's called Text, receives a text, and it renders that text on the screen, remember the semicolon. You will start seeing a lot of warning errors.

[00:05:16]
For example, here it says, what is my error in VS Code? First when you hover this message, you see the help of the text declaration, but if you scroll down you will see the problem. The problem says, we prefer constants. Let's do that again, we prefer constants constructors.

[00:05:39]
So actually, what this says is that because this text is not changing, it's always a text with a Hello World inside, I must declare that with a const prefix I mean, it will work without the const, but it's part of the linter. It's a linter rule. Okay, we can get rid of that rule if you don't want to.

[00:06:03]
In fact, part of the options that I have here to auto solve the problem is to add the modifier, and also I can add for the whole file a reference saying, I don't want you to bother me with this anymore, okay? Be careful using this, ignore linter rules.

[00:06:25]
Okay, so let's add the const, so it's not complaining. So this is actually a widget, we have just created our first widget. It's a class with a build method returning another widget. That's kind of the idea. So we are going to make these kinds of widgets a lot.

[00:06:45]
So that's why the tools, both Visual Studio Code and Android Studio, they include a shortcut to create that class, it's st from a stateless. So if you type stless and then press Enter or Tab, depends on the IDE, both in Android Studio and Visual Studio, it will let you create this class, and then you type the name of the class.

[00:07:14]
And actually you're getting exactly the same thing. The only difference without the text, it includes another widget by default, it's called Container. A Container is an empty widget that contains other widgets. It's like a div in HTML, okay? So roughly we're going to create widget stless, and it creates a widget.

[00:07:37]
That's kind of what we're going to do all the time. We're going to understand why it's called stateless, in a minute, okay? But, for what we have so far, what if we wanna render that HelloWord? Instead of rendering here, MyApp, I can just say, I can replace, when I'm running instead of MyApp, I can run a HelloWord.

[00:08:01]
So I'm asking the system to run HelloWord. So now I can run this again on the emulator or on Chrome, it's up to you. So let's say Chrome, for example, run and debug. Let's wait for it. And look at this, we have an error, so ooh. So we have errors, it's asking for No Directionality widget found.

[00:08:32]
So this is our first error in Flutter. This is how we are going to see them. In this case, the problem is that the text widget is trying to define its position and its size based on a container, and we don't have a container, so this is too much.

[00:08:54]
Okay, we can start adding those containers, but maybe something that I can do is go back to render in MyApp, like so. And then MyApp has its own build method, and it has some containers such as a MaterialApp container that we don't know what that is MaterialApp, but it has to do with material design.

[00:09:17]
And in one place, it says home. That is what's the home of MyApp. And it's pointing to another widget call MyHomePage, that's actually here. Well, if you want, you can replace this with my HelloWold or if you want, you can get into MyHomePage. MyHomePage has also a lot of code that actually we are not going to use.

[00:09:45]
So we need to clean this a little bit, okay? So I'm going to delete the counter and also this increment counter, this is a default code that we have. And at one point there is a body, an you see that body? Well, instead of what we have in body, I'm going to delete this, I'm going to put my HelloWord here.

[00:10:08]
This FloatingActionButton is actually the plus little sign button that was available, I also don't need it. So now it's actually much simpler if I save this. You remember we have halt restart, so every time I save, I can actually see this in action without actually rebuild it, and I have my really small HelloWord there.

[00:10:37]
Okay, so at the end what I have right now is I have a tree of, we can actually understand what's going on here. If we design the widget tree, here, we have an app, it's called MyApp. By the way, what's an app? A widget, it's not actually, an especial concept.

[00:10:57]
It's just a widget. MyApp has inside another one called HomePage, that is actually the one that is here, is MyHomePage, actually. You can rename this widget. And MyHomePage is actually rendering my own widget, that is, a HelloWord. And HelloWord inside has a text. Actually, it's a little bit more complicated than this, a tree, but I think that we can understand what's going on at least, okay?

[00:11:26]
So because we have hot reload, maybe it's a good idea to keep Chrome at one side, so let me try to rearrange the windows here a little bit, like so. And then I have this little Chrome that I will put here. Because Chrome has a minimum size, what I can do is open the data inspector and enable device mode.

[00:11:54]
This is web based. I can actually make a really narrow window with this, like so. And then I can put that here somewhere. So then I can play with Flutter on one side and keep it there on the other side. Also if you're using an emulator like the Android emulator or the iOS emulator, you can also keep that emulator on top of Visual Studio.

[00:12:20]
If you have multiple monitors it's probably a better idea, okay, but I don't have it right now in my setup so I'm doing this. So actually, if I'm changing the text and I'm saving, Ctrl+S or Cmd+S on the Mac, I have an automatic reload in my Chrome, okay?

[00:12:40]
So you can see this is really fast. So you are developing your app, you'll see the results on the screen immediately. Okay, and if you're using a real phone and real device for your previews, it will work with the same speed, actually, really, really fast.