Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,110 --> 00:00:09,670
So back in our main.dart file, we have that main function. As you know, this is a function, it returns nothing,
2
00:00:09,820 --> 00:00:11,200
takes no arguments
3
00:00:11,290 --> 00:00:14,200
and right now, we also have nothing in the function body.
4
00:00:14,200 --> 00:00:19,730
Now as you learned, main is a function which automatically is executed when the app starts by Flutter
5
00:00:19,750 --> 00:00:24,290
and Dart because it's in the main.dart file which you therefore also shouldn't rename.
6
00:00:24,370 --> 00:00:29,040
Now in here, we need to add some code that actually brings something onto the screen.
7
00:00:29,080 --> 00:00:37,110
For that, it's important to understand that on the screen, we basically see a bunch of widgets. Flutter
8
00:00:37,380 --> 00:00:39,040
is about widgets,
9
00:00:39,060 --> 00:00:45,540
it's so important to understand this. Every Flutter app you're building is just a bunch of widgets and
10
00:00:45,540 --> 00:00:51,930
widgets are the UI building blocks you see on the screen, things like the app bar, maybe some image,
11
00:00:51,960 --> 00:00:54,270
maybe a list with list items
12
00:00:54,270 --> 00:00:59,370
and as you can see here for example, widgets also often contain other widgets, like that list which has
13
00:00:59,370 --> 00:01:00,360
list items.
14
00:01:00,360 --> 00:01:08,070
So you compose your Flutter app as that tree of widgets which I already mentioned before, which has a
15
00:01:08,070 --> 00:01:10,250
root widget which is your entire app
16
00:01:10,350 --> 00:01:17,510
and in there, you have your other widgets which yet might hold other widgets thereafter, even your entire
17
00:01:17,510 --> 00:01:17,890
page,
18
00:01:17,900 --> 00:01:26,410
so the entire thing that holds all the widgets on your page on your screen is a widget in Flutter. So
19
00:01:26,470 --> 00:01:28,100
since everything in Flutter is a widget
20
00:01:28,120 --> 00:01:34,930
and since the entire app is a widget, we probably need to create such an app widget which then has other
21
00:01:34,930 --> 00:01:36,730
widgets to see something on the screen
22
00:01:36,820 --> 00:01:44,020
and that's 100% correct. Now to create such a widget, we need to create a class because a widget
23
00:01:44,170 --> 00:01:45,940
is a special type of object
24
00:01:45,940 --> 00:01:50,360
so to say and you learned that you need classes to create objects.
25
00:01:50,470 --> 00:01:55,750
So let's add a class here and you can give it any name you want and I will name it MyApp,
26
00:01:55,870 --> 00:02:02,260
following that naming convention which is called pascal case, where you have a capital starting character
27
00:02:02,530 --> 00:02:09,910
and then every word inside the word also starts with a capital starting character, no blanks in between,
28
00:02:10,120 --> 00:02:17,560
no underscores, no dashes, your classes should be named like this. The concrete name if this is MyApp,
29
00:02:18,250 --> 00:02:25,720
MyCoolApp or something else is totally up to you. Now this would be a class but as you probably can
30
00:02:25,720 --> 00:02:33,010
imagine, a widget that really can be seen on the screen is not that trivial to create because in the
31
00:02:33,010 --> 00:02:36,980
end, the pixels on the screen do need to be controlled.
32
00:02:37,000 --> 00:02:42,460
Now thankfully, we don't have to write that logic on our own, Flutter does all of that behind the
33
00:02:42,460 --> 00:02:49,270
scenes and therefore, our class here now uses a feature called inheritance.
34
00:02:49,270 --> 00:02:56,320
That means that it builds up on a base class, gets all the features of that base class and only adds
35
00:02:56,530 --> 00:02:58,710
new features to it.
36
00:02:58,840 --> 00:03:06,790
We do inherit by adding the extends keyword here after the class name before the curly braces and that inform
37
00:03:06,790 --> 00:03:10,280
Dart that this class will be based on some other class
38
00:03:10,420 --> 00:03:17,470
and you can only extend one class at a time. Now the class I do want to extend here is not a class we
39
00:03:17,470 --> 00:03:21,130
will write but a class provided by Flutter.
40
00:03:21,220 --> 00:03:25,600
Now of course in our whole project here, we only have one Dart file in the lib folder and that's our
41
00:03:25,600 --> 00:03:26,860
own Dart file
42
00:03:26,950 --> 00:03:32,500
but please remember that we have that pubspec file where we define which dependencies our application
43
00:03:32,500 --> 00:03:34,630
has or our Dart project has
44
00:03:34,720 --> 00:03:39,270
and here we have one dependency and that's Flutter, the Flutter framework.
45
00:03:39,460 --> 00:03:43,540
Now the files of that framework are not stored here in that project,
46
00:03:43,540 --> 00:03:49,390
instead they're stored somewhere else on your machine, typically in your user folder somewhere but you
47
00:03:49,390 --> 00:03:56,890
can import from these files because the connection is established with the help of this entry in the
48
00:03:56,890 --> 00:03:58,800
pubspec.yaml file.
49
00:03:58,840 --> 00:04:04,210
So now in the main.dart file, we can inform Dart that we want to reach out to some other file,
50
00:04:04,240 --> 00:04:10,340
in this case from the Flutter framework, that gives us the class which we would want to extend here.
51
00:04:10,570 --> 00:04:12,680
We do that by adding the import keyword,
52
00:04:12,700 --> 00:04:18,250
this tells Dart Hey I want some functionality which is not in this file but which is in some other
53
00:04:18,250 --> 00:04:22,590
file. Now you can point at your own files there too and we'll do that later
54
00:04:22,780 --> 00:04:28,230
but you can also point at third-party packages which are part of your project.
55
00:04:28,390 --> 00:04:34,450
You do this by adding package: and then the name of the package, which in this case is Flutter and
56
00:04:34,450 --> 00:04:40,960
then a lot of packages have a lot of files that make up this package. So you can add a slash here and
57
00:04:40,960 --> 00:04:42,810
then point at a concrete file,
58
00:04:42,820 --> 00:04:45,630
in this case this would be material.dart.
59
00:04:45,790 --> 00:04:49,090
That's one of the files the Flutter framework exposes to you,
60
00:04:49,090 --> 00:04:54,850
it has a lot of built-in widgets following the material theming and later, you will also learn how to
61
00:04:54,850 --> 00:05:02,950
make your apps look good on iOS but material themes also work on iOS and besides these prestyled
62
00:05:02,950 --> 00:05:09,610
material looking widgets, the material.dart file also has a base class which allows you to create your
63
00:05:09,640 --> 00:05:14,140
own widgets and that's the stateless widget class.
64
00:05:14,530 --> 00:05:20,200
So we extend stateless widget here and this now turns our class into a class which can be used as a
65
00:05:20,200 --> 00:05:22,450
widget by Flutter.
66
00:05:22,480 --> 00:05:28,450
However, now we've got a new error here that it's missing a correct implementation of
67
00:05:28,450 --> 00:05:30,010
StatelessWidget.build.
68
00:05:30,010 --> 00:05:32,860
Now what does this mean? Now
69
00:05:32,870 --> 00:05:42,390
.build signals that this seems to be some property, so a variable, which is part of that class or maybe
70
00:05:42,390 --> 00:05:44,530
it's a function that's part of the class.
71
00:05:44,700 --> 00:05:50,040
We haven't had a look at this before but besides variables, you can also have functions inside classes.
72
00:05:50,880 --> 00:05:57,450
Now variables inside of classes would be called properties, functions inside of classes are called
73
00:05:57,540 --> 00:05:58,890
methods.
74
00:05:59,010 --> 00:06:01,230
So we have to add a special method here,
75
00:06:01,230 --> 00:06:04,680
now how do I know that it's a method and not a property?
76
00:06:04,680 --> 00:06:06,510
It's just something you have to memorize,
77
00:06:06,540 --> 00:06:09,450
one of the very few things you have to memorize.
78
00:06:09,870 --> 00:06:12,310
So here, this is a method which is missing,
79
00:06:12,350 --> 00:06:17,700
so let's add build here since it's a method and therefore effectively a function, we can add parentheses
80
00:06:17,700 --> 00:06:22,110
here and we have to add them in curly braces to mark the body of that function.
81
00:06:22,290 --> 00:06:28,440
Now functions can take arguments and if we hover over this to read the error here, we actually see that
82
00:06:28,530 --> 00:06:34,620
it isn't a valid override, whatever that means, of the build method and indeed, it should take a build
83
00:06:34,620 --> 00:06:37,660
context as an argument.
84
00:06:37,740 --> 00:06:39,050
So let's add an argument here,
85
00:06:39,060 --> 00:06:42,330
you can name it ctx or context, whatever you want,
86
00:06:42,330 --> 00:06:48,840
it's a special type of object, a special object which will be passed into the build method automatically
87
00:06:48,960 --> 00:06:53,760
because you will never call that method, Flutter will call it whenver it needs to draw something onto
88
00:06:53,760 --> 00:06:59,730
the screen and context is an object into which I'll dive deeper later, in the end it holds some meta information
89
00:06:59,730 --> 00:07:02,340
about our app and about this widget we're building
90
00:07:02,340 --> 00:07:08,970
but for now let's just add it and let's also add a type annotation. The type is build context which is
91
00:07:09,000 --> 00:07:14,420
the end class that is also defined material.dart which is why we can use it here.
92
00:07:14,460 --> 00:07:21,480
So build context is a special object type provided by Flutter in the material.dart file and this context
93
00:07:21,600 --> 00:07:28,140
object is of that type and we get it automatically by Flutter. Now build is also a function or a method
94
00:07:28,440 --> 00:07:33,990
which returns something, it needs to return a widget because you work with the widgets in Flutter, your
95
00:07:33,990 --> 00:07:35,300
entire app as a widget,
96
00:07:35,370 --> 00:07:36,940
we're trying to build an app here,
97
00:07:37,050 --> 00:07:42,660
the build function is what Dart and Flutter will call in the end when they try to draw something onto
98
00:07:42,660 --> 00:07:43,360
the screen
99
00:07:43,530 --> 00:07:47,740
and therefore, the build method here needs to return a widget.
100
00:07:47,940 --> 00:07:55,170
Now just like build context, widget is in the end a class and every class automatically then also is
101
00:07:55,170 --> 00:07:58,870
a type, which is provided by material.dart.
102
00:07:58,890 --> 00:08:06,720
Now we need to return such a widget here inside of MyApp and there, there is a special widget which
103
00:08:06,720 --> 00:08:07,700
we should return
104
00:08:07,860 --> 00:08:12,490
and that's the MaterialApp widget, also provided by material.dart,
105
00:08:12,600 --> 00:08:21,180
that's a widget provided by the Flutter team which does some base setup to turn your combination of
106
00:08:21,180 --> 00:08:24,310
widgets into a real app that can be rendered,
107
00:08:24,330 --> 00:08:30,210
it does a lot of heavy lifting behind the scenes you could say. MaterialApp also takes a couple
108
00:08:30,210 --> 00:08:37,110
of arguments, as you can see it's a pretty long list and all these arguments are so-called named arguments.
109
00:08:37,290 --> 00:08:42,030
Now thus far, we only saw something which are positional arguments, which means the build method takes
110
00:08:42,030 --> 00:08:48,960
an argument, context, because it takes one argument we accept it like this by giving it a name in
111
00:08:48,960 --> 00:08:55,020
the end and the first and only argument which will be passed into build when Flutter calls the build
112
00:08:55,020 --> 00:09:03,060
method will be passed into context or will be available as context. In our example here, we had two positional
113
00:09:03,060 --> 00:09:09,420
arguments in addNumbers, num1 and num2 and what we passed in as a first argument here when we call the
114
00:09:09,420 --> 00:09:17,110
function would end up in num1, what we passed in as the second argument here would end up in num2. Now
115
00:09:17,110 --> 00:09:23,660
MaterialApp uses so-called named arguments which means we don't pass in data in order here
116
00:09:23,830 --> 00:09:30,680
but because that has a lot of possible arguments we can set, which are all optional in the end,
117
00:09:30,790 --> 00:09:35,770
we target an argument by its name and there for the moment we only need the
118
00:09:35,770 --> 00:09:43,830
home argument. Home is basically the core widget which Flutter will bring onto the screen
119
00:09:43,830 --> 00:09:49,620
when this entire app is mounted to the screen and here we could use a text widget which is yet another
120
00:09:49,620 --> 00:09:55,310
widget built into Flutter and you will work a lot with these built-in widgets because thankfully, you
121
00:09:55,310 --> 00:10:01,110
rarely have to reinvent the wheel and all the core UI building blocks you need in modern apps already
122
00:10:01,110 --> 00:10:02,520
exist.
123
00:10:02,520 --> 00:10:07,920
Text takes a string, you learned about that data type which you can create with single or double quotes
124
00:10:08,340 --> 00:10:09,540
as an input
125
00:10:09,570 --> 00:10:12,480
and here we could print Hello.
126
00:10:12,490 --> 00:10:18,370
So now we have that MaterialApp widget which is provided by material.dart with that named argument,
127
00:10:18,670 --> 00:10:23,770
which in case it's not entirely clear is something we'll also use throughout this course and we'll also
128
00:10:23,770 --> 00:10:28,630
create our own functions that take named arguments so that this becomes clearer
129
00:10:28,630 --> 00:10:34,480
and then here, we also have hello which we passed to text. Now as a side note if you're wondering whether
130
00:10:34,480 --> 00:10:37,860
MaterialApp is a function or a class, it is a class
131
00:10:37,930 --> 00:10:43,930
and yet we can pass data to it with a feature called a constructor but that's also something I'll come
132
00:10:43,930 --> 00:10:45,290
back to later.
133
00:10:45,460 --> 00:10:50,620
For now, let's just accept that this is some code which will create something which can be treated as
134
00:10:50,620 --> 00:10:56,200
an app because MaterialApp does a lot of heavy lifting behind the scenes and which should also output
135
00:10:56,200 --> 00:10:57,350
some code.
136
00:10:57,370 --> 00:11:00,730
Now we just need to wire up that main function with this class here.
15323
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.