All language subtitles for 004 Why Flutter_.en_US

af Afrikaans
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bn Bengali
bs Bosnian
bg Bulgarian
ca Catalan
ceb Cebuano
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
tl Filipino
fi Finnish
fr French Download
fy Frisian
gl Galician
ka Georgian
de German
el Greek
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
km Khmer
ko Korean
ku Kurdish (Kurmanji)
ky Kyrgyz
lo Lao
la Latin
lv Latvian
lt Lithuanian
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mn Mongolian
my Myanmar (Burmese)
ne Nepali
no Norwegian
ps Pashto
fa Persian
pl Polish
pt Portuguese
pa Punjabi
ro Romanian
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
st Sesotho
sn Shona
sd Sindhi
si Sinhala
sk Slovak
sl Slovenian
so Somali
es Spanish
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
te Telugu
th Thai
tr Turkish
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
or Odia (Oriya)
rw Kinyarwanda
tk Turkmen
tt Tatar
ug Uyghur
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.