Why Flutter?

So when you're thinking of building a new project, why choose Flutter? What can it do? Well, one of the first reasons you might consider, is that you'll end up with one code base to maintain, one place to debug, and one place to update. So, one code base to rule them all? And this is a huge advantage compared to creating your apps natively, say, creating your iOS apps in Swift and making your Android apps in Java and your web apps in JavaScript and having all of these different places that you need to update and maintain. And it can get really messy. Whereas here you only need to know one language - that's Dart, which is a powerful language that's actually quite easy to work with. Once you've learned and understand how to use it, then you can use it to create your iOS apps, your Android apps, your web apps. And it means that you only have to get good at one thing instead of lots of different things. And if you've done any programming before, then you'll realize that Dart is actually very, very similar to a lot of modern object-oriented programming languages. It has a lot of features that other powerful languages will have. And it's been used internally at Google to build powerful tools such as Google AdWords and Google Fiber. And its usage is only going to get bigger. Currently, we can already use Flutter and dart to build iOS and Android mobile apps, but its applications go beyond that. You'll soon be able to use Hummingbird to create Web applications writing Dart code and even use it to build applications that run on your desktop. Not only is that the advantage of maintaining and updating one code base, but Flutter allows you to use a very simple and flexible layout system to build beautiful user interfaces for whatever project you end up embarking on. And this is one of the biggest struggles that modern app developers have to deal with because you might remember when the iPhone 3G was first launched, there was just one screen size and one aspect ratio. It was a 3.5 inch screen. And it's crazy to think that it used to cost just $99. And now it cost something like a bajillion dollars. But there's a whole family of devices. There's the iPad Pros, the iPads, the iPad Airs, the iPhones and all of its little cousins and uncles and aunts and neighbors and... and it's just a huge ecosystem of different screen sizes, different aspect ratios. And as a developer you have to contend with whole of this and to try and make your app look good on every single one of these screens. And it gets even worse when you start thinking about Android because of the fact that Android is open-source, so it means that literally anybody who wants to build a smartphone can use Android as the operating system. If you're building an Android app, it could be run on any sort of million types of devices with again different screen sizes different aspect ratios. And you can see that even back in August 2014, there were just too many different devices that were running Android, even for you to keep track of. So as a developer, if we want to layout our screen to make the most of the screen real estate and making sure that the user actually has a good experience using our app. In order to do this both on iOS and Android, we now use constraints. And constraints essentially get more complex as the number of elements grow on screen. So constraints can be really easy to do and do well if you only have four or five things on screen. But we're no longer in 3.5 inch screen era anymore And when we used to have a small screen, there's only so much that you can fit onto that screen. And this is the time when it made sense to use constraints: few elements, little complexity. But our screens have gotten bigger and bigger and bigger. I'm pretty sure that the next phone will have no bezels whatsoever and it'll be the size of my face. But, this also means that you can feed a lot more stuff onto that screen. So there's more elements, which means that constraining each of them in relation to each other gets more complex. And the more complexity there is - in anything - means that it's harder to understand. And it's harder to do a good job of creating beautiful user interfaces that have good user experience. So where does Flutter get its inspiration? Well, a lot of it comes from the web. Because this is one place where they've actually had to adapt to various different sizes, because people pull up websites on mobile, on iPads, on tablets, on large desktop displays. So a lot of the things that have evolved in the web ecosystem have been really really good at dealing with layout on different screen sizes. And through the use of things such as grids or columns or bootstrap. we've developed really simple and elegant ways of laying out the user interface on a website. So why can't we do the same on mobile? And there's a lot of core concepts from web design that comes into Flutter development. And it allows you to make the use of rows. For example, stacking elements next to each other horizontally. Or columns - items that need to stack vertically on the screen. Or stacks - things that need to stack on top of each other. And then giving them padding or giving them margins or centering them. And having a whole bunch of these convenient widgets that make it easy to lay out your screen. Now, as if having a single code base to work with and an intuitive and beautiful way of laying out your app's user interface wasn't enough, there's also something called Hot Reload. When we're developing apps, one of the biggest pains is when you have to run the app because often on iOS, it can take anywhere between 10 and 30 seconds between saving your code, running your app, compiling it, and finally seeing it on screen. But when you're working in Flutter, as soon as you update your code and you hit "Save", your user interface will change in front of your eyes in a fraction of a second sometimes. And this leads to a very different way of designing the user interface. It's almost like you have a refresh button on a website. As soon as you change something, you hit save, and you see the changes in your app. And then you iterate. And you end up narrowing down on the final design that you want because you get access to the super-fast reload. And this makes it really fun and really easy to design beautiful interfaces. And you can see it in action here. Every single time that I hit save, you can see that down here, you have the "Preparing hot reload..." and instantly the UI updates. So I changed the color. I hit save. The UI updates. And this is recorded in real-time. There's no speeding up. There's no editing done here. It's just that fast. And it makes it a really fun experience to design a beautiful user interface. Now the last thing I want to talk about is the fact that when you're working with Flutter, you get access to the original source code. Because Flutter is open source, it means that if you want to see how a button is implemented, you can simply just click on it and you'll 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 on anything on the screen and you can see the original code that the team wrote in order for it to be the way it is. And it means that you can more easily understand how these widgets work. If you've been working on iOS development, you'll know that a lot of it is a mysterious black box. Because on iOS a lot of the components are proprietary. How Apple implements a button or a slider is their secret sauce essentially. And you don't get access to that. But on Flutter you do. And what this means is that you'll be at to see how something, in particular, is implemented. And if you wanted to customize it; if you wanted to build entirely your own version of it, you can simply copy what they did for their version and update the parts that you need to. So let's say that I don't want to use Flutter's bog-standard floating action button anymore. I want to create my very own version. Well, if we go ahead and take a look at it, we can see that it's built with this amount of elevation of the screen and a height and width of this size. And then we can see that once it's put togethe, it's based on something called a raw material button. So I'm gonna go in here and I'm going to scrap their version of the floating action button. And I'm just gonna build my very own raw material button. And my button is going to be customized the way that I want it to. So I want it to have a color that is maybe red instead of blue. So it will change the colors to red. And when I hit "Save", you can see it performs hot reload and we end up with a red rectangle. Now I don't really want it to be a rectangle. I still quite like the rounded edges. So let's change its shape. Let's change it to a round rectangle. And I'm going to make its corners a little bit rounder. So I'm going to change the border-radius to maybe 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 pill shape that I was looking for. So next let's customize it a little bit more. I wanted to be a little bit bigger at the moment. It's really, really small. Let's make it a little bit taller and a little bit wider. So let's add some box constraints. And I'm going to change the height to, let's say, 50 pixels. And we'll make the width maybe 100. So, now when I hit "Save", I've got the perfect button. And this is exactly the one that I want. And I've managed to customize it to exactly my liking based off looking at exactly how the Flutter team created the floating action button. And I just changed it to make it my own version. So there's a lot of really exciting things that you can do with Flutter. And in the coming lessons, we're going to be exploring and diving deep into all of the cool things that you can do with Flutter and Dart.