Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,270 --> 00:00:05,460
So when you're thinking of building a new project, why choose Flutter?
2
00:00:05,460 --> 00:00:06,390
What can it do?
3
00:00:07,550 --> 00:00:14,090
Well, one of the first reasons you might consider, is that you'll end up with one code base to maintain,
4
00:00:14,510 --> 00:00:18,410
one place to debug, and one place to update.
5
00:00:18,410 --> 00:00:21,530
So, one code base to rule them all?
6
00:00:21,530 --> 00:00:28,610
And this is a huge advantage compared to creating your apps natively, say, creating your iOS apps in
7
00:00:28,610 --> 00:00:36,020
Swift and making your Android apps in Java and your web apps in JavaScript and having all of these different
8
00:00:36,020 --> 00:00:40,990
places that you need to update and maintain. And it can get really messy.
9
00:00:41,060 --> 00:00:49,220
Whereas here you only need to know one language - that's Dart, which is a powerful language that's actually
10
00:00:49,220 --> 00:00:50,680
quite easy to work with.
11
00:00:51,140 --> 00:00:57,500
Once you've learned and understand how to use it, then you can use it to create your iOS apps, your
12
00:00:57,710 --> 00:01:05,060
Android apps, your web apps. And it means that you only have to get good at one thing instead of lots
13
00:01:05,120 --> 00:01:06,140
of different things.
14
00:01:06,710 --> 00:01:13,430
And if you've done any programming before, then you'll realize that Dart is actually very, very similar
15
00:01:13,430 --> 00:01:17,880
to a lot of modern object-oriented programming languages.
16
00:01:17,970 --> 00:01:24,170
It has a lot of features that other powerful languages will have. And it's been used internally at Google
17
00:01:24,170 --> 00:01:32,620
to build powerful tools such as Google AdWords and Google Fiber. And its usage is only going to get bigger.
18
00:01:32,630 --> 00:01:41,090
Currently, we can already use Flutter and dart to build iOS and Android mobile apps, but its applications
19
00:01:41,120 --> 00:01:42,630
go beyond that.
20
00:01:42,710 --> 00:01:49,370
You'll soon be able to use Hummingbird to create Web applications writing Dart code and even use it
21
00:01:49,370 --> 00:01:57,350
to build applications that run on your desktop. Not only is that the advantage of maintaining and updating
22
00:01:57,410 --> 00:02:06,710
one code base, but Flutter allows you to use a very simple and flexible layout system to build beautiful
23
00:02:06,710 --> 00:02:10,820
user interfaces for whatever project you end up embarking on.
24
00:02:10,820 --> 00:02:17,060
And this is one of the biggest struggles that modern app developers have to deal with because you might
25
00:02:17,060 --> 00:02:25,660
remember when the iPhone 3G was first launched, there was just one screen size and one aspect ratio. It
26
00:02:25,670 --> 00:02:31,820
was a 3.5 inch screen. And it's crazy to think that it used to cost just $99.
27
00:02:32,060 --> 00:02:34,940
And now it cost something like a bajillion dollars.
28
00:02:35,060 --> 00:02:44,720
But there's a whole family of devices. There's the iPad Pros, the iPads, the iPad Airs, the iPhones and all of its
29
00:02:44,750 --> 00:02:53,030
little cousins and uncles and aunts and neighbors and... and it's just a huge ecosystem of different screen
30
00:02:53,030 --> 00:02:55,550
sizes, different aspect ratios.
31
00:02:55,550 --> 00:03:01,640
And as a developer you have to contend with whole of this and to try and make your app look good on
32
00:03:01,810 --> 00:03:09,170
every single one of these screens. And it gets even worse when you start thinking about Android because
33
00:03:09,170 --> 00:03:16,520
of the fact that Android is open-source, so it means that literally anybody who wants to build a smartphone
34
00:03:16,880 --> 00:03:20,080
can use Android as the operating system.
35
00:03:20,150 --> 00:03:28,130
If you're building an Android app, it could be run on any sort of million types of devices with again
36
00:03:28,160 --> 00:03:35,900
different screen sizes different aspect ratios. And you can see that even back in August 2014, there were
37
00:03:35,900 --> 00:03:39,250
just too many different devices that were running Android,
38
00:03:39,380 --> 00:03:41,260
even for you to keep track of.
39
00:03:41,480 --> 00:03:48,620
So as a developer, if we want to layout our screen to make the most of the screen real estate and making
40
00:03:48,620 --> 00:03:56,480
sure that the user actually has a good experience using our app. In order to do this both on iOS and
41
00:03:56,480 --> 00:04:06,080
Android, we now use constraints. And constraints essentially get more complex as the number of elements
42
00:04:06,140 --> 00:04:07,670
grow on screen.
43
00:04:07,670 --> 00:04:15,260
So constraints can be really easy to do and do well if you only have four or five things on screen. But
44
00:04:15,260 --> 00:04:16,580
we're no longer in
45
00:04:16,610 --> 00:04:19,680
3.5 inch screen era anymore
46
00:04:19,790 --> 00:04:25,880
And when we used to have a small screen, there's only so much that you can fit onto that screen.
47
00:04:26,060 --> 00:04:33,770
And this is the time when it made sense to use constraints: few elements, little complexity. But our screens
48
00:04:33,770 --> 00:04:36,690
have gotten bigger and bigger and bigger.
49
00:04:36,710 --> 00:04:43,280
I'm pretty sure that the next phone will have no bezels whatsoever and it'll be the size of my face.
50
00:04:43,280 --> 00:04:51,050
But, this also means that you can feed a lot more stuff onto that screen. So there's more elements, which
51
00:04:51,050 --> 00:04:58,850
means that constraining each of them in relation to each other gets more complex. And the more complexity
52
00:04:58,850 --> 00:05:07,010
there is - in anything - means that it's harder to understand. And it's harder to do a good job of creating
53
00:05:07,100 --> 00:05:11,150
beautiful user interfaces that have good user experience.
54
00:05:11,150 --> 00:05:14,240
So where does Flutter get its inspiration?
55
00:05:14,240 --> 00:05:22,190
Well, a lot of it comes from the web. Because this is one place where they've actually had to adapt to
56
00:05:22,190 --> 00:05:32,390
various different sizes, because people pull up websites on mobile, on iPads, on tablets, on large desktop
57
00:05:32,390 --> 00:05:33,560
displays.
58
00:05:33,560 --> 00:05:40,070
So a lot of the things that have evolved in the web ecosystem have been really really good at dealing
59
00:05:40,430 --> 00:05:49,910
with layout on different screen sizes. And through the use of things such as grids or columns or bootstrap.
60
00:05:49,910 --> 00:05:56,730
we've developed really simple and elegant ways of laying out the user interface on a website.
61
00:05:57,020 --> 00:06:00,080
So why can't we do the same on mobile?
62
00:06:00,290 --> 00:06:08,510
And there's a lot of core concepts from web design that comes into Flutter development. And it allows
63
00:06:08,510 --> 00:06:11,510
you to make the use of rows.
64
00:06:11,540 --> 00:06:19,190
For example, stacking elements next to each other horizontally. Or columns - items that need to stack vertically
65
00:06:19,190 --> 00:06:25,400
on the screen. Or stacks - things that need to stack on top of each other. And then giving them padding
66
00:06:25,400 --> 00:06:30,770
or giving them margins or centering them. And having a whole bunch of these convenient widgets that make
67
00:06:30,770 --> 00:06:38,830
it easy to lay out your screen. Now, as if having a single code base to work with and an intuitive and
68
00:06:38,830 --> 00:06:43,500
beautiful way of laying out your app's user interface wasn't enough,
69
00:06:43,510 --> 00:06:48,280
there's also something called Hot Reload. When we're developing apps,
70
00:06:48,370 --> 00:06:56,170
one of the biggest pains is when you have to run the app because often on iOS, it can take anywhere between
71
00:06:56,170 --> 00:07:04,490
10 and 30 seconds between saving your code, running your app, compiling it, and finally seeing it on screen.
72
00:07:04,570 --> 00:07:11,590
But when you're working in Flutter, as soon as you update your code and you hit "Save", your user interface
73
00:07:11,710 --> 00:07:16,870
will change in front of your eyes in a fraction of a second sometimes.
74
00:07:16,950 --> 00:07:22,070
And this leads to a very different way of designing the user interface.
75
00:07:22,090 --> 00:07:28,020
It's almost like you have a refresh button on a website. As soon as you change something,
76
00:07:28,060 --> 00:07:35,140
you hit save, and you see the changes in your app. And then you iterate. And you end up narrowing down
77
00:07:35,230 --> 00:07:41,290
on the final design that you want because you get access to the super-fast reload.
78
00:07:41,560 --> 00:07:49,930
And this makes it really fun and really easy to design beautiful interfaces. And you can see it in action
79
00:07:49,930 --> 00:07:53,740
here. Every single time that I hit save,
80
00:07:53,740 --> 00:08:01,360
you can see that down here, you have the "Preparing hot reload..." and instantly the UI updates.
81
00:08:01,360 --> 00:08:07,240
So I changed the color. I hit save. The UI updates. And this is recorded in real-time.
82
00:08:07,240 --> 00:08:11,380
There's no speeding up. There's no editing done here.
83
00:08:11,380 --> 00:08:21,400
It's just that fast. And it makes it a really fun experience to design a beautiful user interface. Now
84
00:08:21,410 --> 00:08:27,500
the last thing I want to talk about is the fact that when you're working with Flutter, you get access
85
00:08:27,560 --> 00:08:33,160
to the original source code. Because Flutter is open source,
86
00:08:33,200 --> 00:08:39,130
it means that if you want to see how a button is implemented, you can simply just click on it and you'll
87
00:08:39,140 --> 00:08:46,400
see how they wrote the code to make it look the way it is; how to behave the way it is; and you can click
88
00:08:46,400 --> 00:08:53,300
on anything on the screen and you can see the original code that the team wrote in order for it to be
89
00:08:53,300 --> 00:08:54,370
the way it is.
90
00:08:54,560 --> 00:08:59,320
And it means that you can more easily understand how these widgets work.
91
00:08:59,870 --> 00:09:07,580
If you've been working on iOS development, you'll know that a lot of it is a mysterious black box. Because
92
00:09:08,150 --> 00:09:12,140
on iOS a lot of the components are proprietary.
93
00:09:12,200 --> 00:09:20,780
How Apple implements a button or a slider is their secret sauce essentially. And you don't get access
94
00:09:20,780 --> 00:09:25,070
to that. But on Flutter you do.
95
00:09:25,070 --> 00:09:32,540
And what this means is that you'll be at to see how something, in particular, is implemented. And if you
96
00:09:32,540 --> 00:09:39,110
wanted to customize it; if you wanted to build entirely your own version of it, you can simply copy what
97
00:09:39,110 --> 00:09:46,890
they did for their version and update the parts that you need to. So let's say that I don't want to use
98
00:09:46,980 --> 00:09:54,840
Flutter's bog-standard floating action button anymore. I want to create my very own version. Well, if we
99
00:09:54,840 --> 00:10:01,440
go ahead and take a look at it, we can see that it's built with this amount of elevation of the screen
100
00:10:02,130 --> 00:10:09,300
and a height and width of this size. And then we can see that once it's put togethe, it's based on something
101
00:10:09,300 --> 00:10:11,490
called a raw material button.
102
00:10:11,490 --> 00:10:19,350
So I'm gonna go in here and I'm going to scrap their version of the floating action button. And I'm just
103
00:10:19,350 --> 00:10:29,050
gonna build my very own raw material button. And my button is going to be customized the way that I want
104
00:10:29,050 --> 00:10:29,890
it to.
105
00:10:29,980 --> 00:10:35,840
So I want it to have a color that is maybe red instead of blue.
106
00:10:35,860 --> 00:10:39,000
So it will change the colors to red.
107
00:10:39,160 --> 00:10:46,200
And when I hit "Save", you can see it performs hot reload and we end up with a red rectangle.
108
00:10:46,210 --> 00:10:48,160
Now I don't really want it to be a rectangle.
109
00:10:48,160 --> 00:10:50,440
I still quite like the rounded edges.
110
00:10:50,440 --> 00:10:52,210
So let's change its shape.
111
00:10:52,210 --> 00:10:55,360
Let's change it to a round rectangle.
112
00:10:55,360 --> 00:11:04,090
And I'm going to make its corners a little bit rounder. So I'm going to change the border-radius to maybe
113
00:11:04,090 --> 00:11:13,440
let's say 50 pixels. And now when I hit save, you can see it's a lot rounder. It looks much more like the
114
00:11:13,440 --> 00:11:15,900
pill shape that I was looking for.
115
00:11:15,900 --> 00:11:18,570
So next let's customize it a little bit more.
116
00:11:18,570 --> 00:11:20,880
I wanted to be a little bit bigger at the moment.
117
00:11:20,880 --> 00:11:22,320
It's really, really small.
118
00:11:22,320 --> 00:11:28,210
Let's make it a little bit taller and a little bit wider. So let's add some box constraints.
119
00:11:28,320 --> 00:11:37,530
And I'm going to change the height to, let's say, 50 pixels. And we'll make the width maybe 100.
120
00:11:37,550 --> 00:11:44,400
So, now when I hit "Save", I've got the perfect button. And this is exactly the one that I want. And I've
121
00:11:44,400 --> 00:11:52,230
managed to customize it to exactly my liking based off looking at exactly how the Flutter team created
122
00:11:52,230 --> 00:11:54,090
the floating action button.
123
00:11:54,090 --> 00:11:58,380
And I just changed it to make it my own version.
124
00:11:58,380 --> 00:12:03,330
So there's a lot of really exciting things that you can do with Flutter. And in the coming lessons, we're
125
00:12:03,330 --> 00:12:09,470
going to be exploring and diving deep into all of the cool things that you can do with Flutter and Dart.
14165
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.