Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:02,420 --> 00:00:08,210
With that, it's time to really dive into the code and for that, let's look into the only Dart file we have
2
00:00:08,210 --> 00:00:10,160
at the moment in our lib folder.
3
00:00:10,160 --> 00:00:15,050
It's the main.dart file and since this is the only Dart file we have right now
4
00:00:15,230 --> 00:00:21,020
and since I mentioned that this is the folder in which we will write our entire application in the end,
5
00:00:21,500 --> 00:00:27,080
this has to be the file that is responsible for giving us the output we're seeing here,
6
00:00:27,080 --> 00:00:35,540
so for giving us this application and indeed, that's the case. This single file holds all the code that
7
00:00:35,540 --> 00:00:38,120
renders this application onto the screen
8
00:00:38,180 --> 00:00:39,340
and how does it do that
9
00:00:39,380 --> 00:00:42,340
because overall, this is a pretty lean file,
10
00:00:42,380 --> 00:00:44,400
it doesn't have that much code.
11
00:00:44,540 --> 00:00:49,310
All these green lines here with the double slashes at the beginning are just comments,
12
00:00:49,310 --> 00:00:55,750
so this is not even code that does something, it's just there for you to explain what happens thereafter.
13
00:00:55,790 --> 00:00:56,790
So in the end,
14
00:00:56,900 --> 00:00:58,460
this is a really lean file,
15
00:00:58,580 --> 00:00:59,160
what is
16
00:00:59,210 --> 00:01:02,280
this file doing here?
17
00:01:02,320 --> 00:01:06,350
We will rewrite this file to create an application from scratch
18
00:01:06,430 --> 00:01:12,580
but before we do that, I want to briefly walk you through it so that you get an understanding, a basic
19
00:01:12,580 --> 00:01:21,220
understanding of how such a Flutter application works and what Flutter does for you. Flutter as you already
20
00:01:21,460 --> 00:01:30,490
learned or as I already mentioned is both a toolset and a framework, a programming framework for the
21
00:01:30,490 --> 00:01:41,080
Dart language and in the end, a Flutter app is an application where you, the developer, build a UI by adding
22
00:01:41,230 --> 00:01:46,810
widgets. Widgets are components, the building blocks of your user interface, like this button here in
23
00:01:46,810 --> 00:01:47,790
the bottom right corner,
24
00:01:47,830 --> 00:01:48,940
that would be a widget,
25
00:01:49,000 --> 00:01:51,060
the text here, that would be a widget,
26
00:01:51,220 --> 00:01:56,640
the appBar here at the top and that title in there, that would be widgets
27
00:01:56,980 --> 00:01:58,780
and that's what you can see in the code here.
28
00:01:58,780 --> 00:02:08,020
Even if we don't understand all that code, if we scroll down a little bit here to this build method in
29
00:02:08,020 --> 00:02:15,190
that MyHomePageState thing which is totally unclear for now but if we scroll down there, we
30
00:02:15,190 --> 00:02:25,510
can identify things like appBar or things like text and another text or things like a floating action
31
00:02:25,510 --> 00:02:26,500
button
32
00:02:26,640 --> 00:02:34,210
and even if you don't really understand Dart and Flutter, it probably makes sense that this floating
33
00:02:34,300 --> 00:02:41,620
action button is kind of related to that floating button we have here in the bottom right corner and
34
00:02:41,620 --> 00:02:43,200
the two text pieces we have here,
35
00:02:43,210 --> 00:02:49,960
text and text, where we see you have pushed a button this many times, that seems to be responsible for
36
00:02:49,960 --> 00:02:52,530
giving us this text here in the middle
37
00:02:53,200 --> 00:02:54,940
and indeed, that is how it is works.
38
00:02:54,940 --> 00:03:00,710
These are widgets which we didn't create ourselves but which are built into Flutter, which ship with
39
00:03:00,710 --> 00:03:07,180
the Flutter framework, which we can use to put some text onto the screen or to add a button
40
00:03:07,300 --> 00:03:07,940
to the screen
41
00:03:08,260 --> 00:03:12,800
and of course we got way more widgets than these two different kinds of widgets.
42
00:03:12,940 --> 00:03:20,500
We got widgets for different kinds of buttons, for dropdowns, for images, for lists which we can scroll,
43
00:03:20,980 --> 00:03:23,950
for so many things and that is how Flutter works.
44
00:03:23,950 --> 00:03:30,010
You work with these built-in widgets and you build your user interface based on them and you can configure
45
00:03:30,010 --> 00:03:32,540
all these widgets to change their colors
46
00:03:32,650 --> 00:03:39,550
or for example here, to change the text size and you can also build your own widgets which take these
47
00:03:39,550 --> 00:03:45,370
built-in widgets and group them together to build a brand new custom widget which you can then put
48
00:03:45,370 --> 00:03:46,330
somewhere.
49
00:03:46,330 --> 00:03:53,170
For example you could be combining this smaller and this bigger text and then have your my custom output
50
00:03:53,170 --> 00:03:58,110
widget which always prints or draws this smaller and bigger text on the screen
51
00:03:58,210 --> 00:04:04,030
if you would need this combination in other places of your app too. And we'll dive into all of that throughout
52
00:04:04,090 --> 00:04:09,400
the course and I will explain Dart and how Flutter works and how you create such widgets whilst we are
53
00:04:09,400 --> 00:04:10,560
diving into that,
54
00:04:10,570 --> 00:04:17,680
no worries. Here in this starting code, we can already see that here we seem to be doing something with
55
00:04:17,680 --> 00:04:18,150
a widget,
56
00:04:18,180 --> 00:04:24,050
so maybe this is code that does create a custom widget and indeed we're doing that here
57
00:04:24,220 --> 00:04:30,600
but again, I think it makes more sense and it's easier to understand this if we do that step-by-step
58
00:04:30,670 --> 00:04:37,970
and for that, let's actually select the entire code in the main.dart file and delete it.
59
00:04:37,990 --> 00:04:39,790
Now why am I doing that?
60
00:04:39,850 --> 00:04:44,290
Because I want to create a complete app with you from scratch.
61
00:04:44,290 --> 00:04:47,070
I could just give you the instructions on
62
00:04:47,080 --> 00:04:47,340
okay
63
00:04:47,350 --> 00:04:48,750
now add this, add this,
64
00:04:48,850 --> 00:04:49,890
now let's do that
65
00:04:50,230 --> 00:04:54,940
and you would have a working application but you would learn nothing about how it works
66
00:04:55,150 --> 00:05:00,820
and it's super important to understand how it works and why you write which code not only to learn Dart
67
00:05:01,060 --> 00:05:03,460
but also to learn how Flutter works
68
00:05:03,580 --> 00:05:08,800
and that is what you need to build your own Flutter apps because otherwise, you can only build exactly
69
00:05:08,800 --> 00:05:09,370
the same app
70
00:05:09,400 --> 00:05:14,300
I show you but I want you to be able to build any app and for that, you need to learn it from scratch.
71
00:05:14,830 --> 00:05:20,800
Let's remove all that code in main.dart, let's save the file, it now automatically rebuilds the app and
72
00:05:20,800 --> 00:05:25,690
syncs it back and therefore this now crashes because we're not starting anything here and we get an
73
00:05:25,690 --> 00:05:27,940
error here at the bottom and that is all right,
74
00:05:28,000 --> 00:05:29,920
we will now write our own code here.
7762
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.