What is Flutter?

English All right, So the first thing that I want to talk about is: "What exactly is Flutter?". And to be able to answer this question, we first have to put ourselves into the mind of a mobile app developer. So here's one. This is Bob. And he's an iOS developer. Now, Bob made this really cool app where instead of matching with other people, you get to match with foods! And you get to figure out what food you most want to eat. And it's a super popular app. Everybody loves it. But there's just one problem. It's only on iOS. So every other day he gets a question of: "When's it coming to Android?". "When is it coming to Android?" "When is it coming to Android?" And at some point, he finally has had enough and he decides to go and buy loads and loads of books. study Java. study Android development and finally, he's able to have both of these buttons on his website - "Get it on Google Play" and "Download on the App Store". So he now has the same app on the Google Play and the App Store. Now this is great for the users, but for Bob, it means that when he has any updates that he wants to make to the app or any bug fixes, he has to push those both to the Play Store as well as the App Store. So two places now instead of one. And he has to maintain two code bases. So that's a lot of work down the line. It's basically double the amount of work that he used to have. But that's not all because he gets complaints from users saying that "Hey in your app some of the layouts look really weird". "It doesn't look right." "Like why is this button like twice the size of everything else?" "What is wrong with your app?" Now, this is because not only does he have to support a huge array of different screen sizes and aspect ratios for the iOS ecosystem - the iPads, the iPhones, the older iPhones, but he also now has a whole bunch of Android devices. And because Android devices can be made by literally anybody, the number of different screen sizes is just massive. And it's really hard to keep on top of what are all of the different screen sizes in order to be able to design your app to look good on all of them. Now here's where Flutter comes in. The guys at Flutter had this question: "More and more so we're seeing screens everywhere. "There's screens on fridges. There's screens at the bus stop." "There's screens in your mirror. And they're all different aspect ratios and different screen sizes." "So why can't we create something that can intelligently and easily allow developers to design beautiful" "interfaces for all of these different types of screens?" And this is exactly what Flutter is. It's simply a tool kit that makes it easy for developers to design beautiful interfaces for all sorts of screen sizes and devices. And it comes with a whole bunch of pre-built widgets that make it easy to lay out your app. So straightforward things such as laying out your app with rows or with columns or stacks. And it borrows some of the concepts from web design where you can have things that are centred or have padding and margins. And what if you could use this system to design and develop for almost any device? Because all that Flutter does is, it asks for a blank window on the device, be it on Android or iOS or web or desktop. All it's asking for is just a simple blank window. And what Flutter will do is, it will draw onto that blank window whatever it is that needs to be rendered and whatever animations, or interactions, or changes. It's all painted on by Flutter. So this means that instead of having to make iOS apps the Apple way and make Android apps the Android way, you can simply use a whole bunch of pre-built widgets from Flutter, such as a floating action button or a linear progress indicator. And you can simply put these into your app, no matter which platform you're working on. And they've even designed widgets that look the part for each platform. So, for example, your alerts might look like this on your Android app, but you can also specify that if your app is being run on iOS, then they should look like this, making your app look like it was created in a native way. This is how Flutter works. You get access to a whole bunch of widgets so you can see these widgets as Lego blocks almost. And by plugging them together and customizing it you end up with your beautiful app that can be deployed almost anywhere. Let's take a look at how easy it can be working with widgets in real life. I've created a blank app. And I'm going to go ahead and add an app bar. And this is a pre-built widget which is built by Flutter. And as soon as I hit save, my app bar gets painted onto the screen. So I don't like it in blue. So let's customize it to change it to red. So now I added colors widget and I changed the color. So now let's add a text widget that adds a title to the app bar. And just like Lego, I've plugged together all my widgets and I've managed to build my app bar in a matter of seconds. And there's loads of different widgets that are pre-built. For example, if you wanted a floating action button, then we just create that widget. And we can customize it by changing its properties such as the background color or what should go inside it. Piece by piece, widget by widget, I can build up my app and customize it to my liking with very few lines of code. Now what if I wanted some functionality? Well, I can simply create a variable to keep track of, say, the number of donuts that I've eaten in a day and I can change my text field to embed that number variable in there. And then all that happens is when the user presses on the red button, then it will increase the number of doughnuts that I've eaten. And Flutter makes it incredibly easy to build a beautiful interface for our app using these widgets as well as allowing us to customize the widgets to our liking. And finally, building functionality on top of those widgets is also as simple as updating a number of variables. And that we're going to dive into. So now that I've created my doughnut counter app, the best part is I can now deploy that code to all sorts of different devices and platforms without having to rewrite the code or learn a new technology, a new skill, or a new programming language.