Why Flutter?

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 codebase to maintain, one place to debug and one place to update. So, one codebase to rule them all? And this is a huge advantage compared to creating your apps natively, 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 learnt 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 it's usage is only going to get bigger. Currently, we can already use Flutter and Dart to build iOS and Android mobile apps but it's 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 there the advantage of maintaining and updating one codebase, 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 costs something like a bajillion dollars. But, there's a whole family of devices. There's the iPad Pros, there's the iPads, the iPad S, the iPhones and all of it's 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 all 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 as 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 fit a lot more stuff onto that screen so there's more elements which means that constraining each of them 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 this 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 change 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 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 source, essentially, and you don't get access to that but on Flutter you do, and what this means is that you'll be able 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 box 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 together, it's based on something called a Raw Material Button. So, I'm going to go in here and I'm going to scrap their version of the Floating Action Button and I'm just going to 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 we'll 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. Looks much more like the pill shape that I was looking for. So next, let's customize it a little bit more. I want it 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.