Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,330 --> 00:00:00,580
All right.
2
00:00:00,660 --> 00:00:07,980
So before we get started, I wanted to quickly run through just what a Flutter app is composed of; or the
3
00:00:08,070 --> 00:00:10,860
anatomy of a Flutter app.
4
00:00:10,980 --> 00:00:14,520
And we're going to decompose it. And we're going to break it down.
5
00:00:14,520 --> 00:00:21,840
So, as I mentioned before, everything inside a Flutter app is a widget. And you build widgets upon widgets
6
00:00:22,080 --> 00:00:25,620
just like Lego blocks on Lego blocks in order to create your app.
7
00:00:26,130 --> 00:00:29,660
So let's say that we decided to create a brand new app.
8
00:00:29,850 --> 00:00:33,280
The first thing we might do is we might create a scaffold.
9
00:00:33,360 --> 00:00:36,770
And this is just a blank screen for our app.
10
00:00:37,080 --> 00:00:41,490
And inside the scaffold, we're going to add an app bar at the top.
11
00:00:41,490 --> 00:00:47,220
And this is a pre-built widget that simply looks like an app bar and acts like an app bar.
12
00:00:47,280 --> 00:00:49,830
And it's also super easy to create.
13
00:00:49,830 --> 00:00:56,760
Now, the other thing I'm going to put into my scaffold is a container. And this container is just a box
14
00:00:56,880 --> 00:01:00,350
and it's going to contain the content of my app.
15
00:01:00,420 --> 00:01:04,650
Now, the container is going to have a column.
16
00:01:04,710 --> 00:01:06,410
So this is a column.
17
00:01:06,540 --> 00:01:11,950
And so now we can put widgets inside the column that stack vertically.
18
00:01:11,970 --> 00:01:19,300
So, for example, the first thing I might put into my column - at the top - is a row.
19
00:01:19,740 --> 00:01:23,730
And the second thing is - I might put in - a piece of text.
20
00:01:23,820 --> 00:01:32,790
So now I have a column with two items - with two widgets: a row at the top and some text at the bottom.
21
00:01:32,790 --> 00:01:41,940
Now I can go deeper into my widget tree. And in my row, I'm going to add some text and an icon. So when
22
00:01:41,940 --> 00:01:48,660
I want widgets to be positioned vertically - one on top of the other - then I'll use a column to lay them
23
00:01:48,660 --> 00:01:48,860
out.
24
00:01:49,410 --> 00:01:54,780
If I want widgets to be side by side horizontally, then I'll use a row.
25
00:01:54,780 --> 00:02:01,610
And if I wanted to add in a piece of text, then I would use a text widget. If I wanted to add an icon,
26
00:02:01,620 --> 00:02:04,650
then I would use an icon widget. If I want to add an image,
27
00:02:04,680 --> 00:02:06,510
then I would use an image widget.
28
00:02:06,750 --> 00:02:07,740
So you get the point.
29
00:02:08,940 --> 00:02:15,360
And by the end of building our app, we end up with a widget tree like what you see on the right here
30
00:02:16,490 --> 00:02:22,550
Now, our widget tree is just a whole bunch of widgets that are nested within each other.
31
00:02:22,670 --> 00:02:28,010
And if we were to look at the code for our widget tree, it would look kind of similar, although it would
32
00:02:28,010 --> 00:02:29,770
be rotated, I guess.
33
00:02:29,870 --> 00:02:34,240
But essentially we would have all of our widgets nested inside each other.
34
00:02:34,280 --> 00:02:42,880
So inside these parentheses for the scaffold, we've got an app bar and a container: an app bar and a container.
35
00:02:42,890 --> 00:02:46,210
Now, inside the parentheses for the container
36
00:02:46,280 --> 00:02:47,600
So here's where it starts.
37
00:02:47,600 --> 00:02:49,080
And here is where it ends.
38
00:02:49,100 --> 00:02:53,960
Then we have a column. Here's our column.
Inside our column
39
00:02:53,990 --> 00:03:02,010
we have two things: a row and some text. And inside our row, we have another two things:
40
00:03:02,030 --> 00:03:09,980
some text and some icon. And this is how you would represent this tree or this design in Dart code. So
41
00:03:09,980 --> 00:03:16,130
creating a user interface like the one we have here is as simple as writing a few lines of code like
42
00:03:16,130 --> 00:03:16,630
this.
43
00:03:17,480 --> 00:03:23,960
Now, while a lot of these widgets that we've seen so far are basically UI widgets, right? Their functionality
44
00:03:23,960 --> 00:03:30,380
is mainly to either lay things out or to show pieces of text or icons.
45
00:03:30,380 --> 00:03:34,400
Now there's also other widgets that have some functionality.
46
00:03:34,400 --> 00:03:41,660
For example, if inside the column - instead of showing a piece of text - I wanted to show a picture from
47
00:03:41,660 --> 00:03:42,280
the Internet.
48
00:03:42,860 --> 00:03:50,840
Well, I can then use a widget called a network image and I'll give it a U.R.L. and it'll be able to load
49
00:03:50,960 --> 00:03:53,930
the image from that URL address.
50
00:03:54,800 --> 00:03:58,860
So this is a widget that performs a little bit of functionality.
51
00:03:59,000 --> 00:04:04,010
And so the way I like to think of it is: when you're building Flutter apps, it's kind of like working
52
00:04:04,010 --> 00:04:11,180
with Lego Technic. Because while traditional Lego is mostly just about building blocks on top of each
53
00:04:11,180 --> 00:04:14,870
other to create ... well, all I created was pyramids.
54
00:04:14,870 --> 00:04:18,010
It was the easiest thing to do, so I made a lot of pyramids.
55
00:04:18,230 --> 00:04:24,170
I wasn't creative enough to make much else ... but with Lego Technic you can build something that not only
56
00:04:24,170 --> 00:04:27,070
looks good, but also has functionality.
57
00:04:27,080 --> 00:04:34,010
For example, this truck here. We've got a little remote control and you can move the crane arm up and
58
00:04:34,010 --> 00:04:41,180
down. And this is because not only does it have the Lego pieces or the widgets for the appearance, such
59
00:04:41,180 --> 00:04:49,670
as wheels or the front bumper or the crane, but it also has the pieces that give it functionality, like
60
00:04:49,790 --> 00:04:52,610
a motor or a battery.
61
00:04:52,790 --> 00:04:58,610
And it's through plugging all of these pieces together, you end up with something that not only looks
62
00:04:58,610 --> 00:05:02,200
beautiful, but is also interactive.
63
00:05:03,050 --> 00:05:09,980
And that is essentially what our Flutter apps are and how they will get built through the use of all
64
00:05:09,980 --> 00:05:12,650
of these different types of widgets.
65
00:05:12,650 --> 00:05:21,110
So, once you're ready, let's get started and set up and download our tools so that we can get started developing
66
00:05:21,200 --> 00:05:26,820
our very own Flutter apps! For all of that and more, I'll see you on the next lesson.
6817
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.