Flutter Tutorial for Beginners #2 - Flutter Overview

All right then gang, so if there's one concept I want you to fully understand by the end of this video, it's going to be widgets. Widgets are the bedrock of Flutter applications because without them we can't create them. Everything inside a Flutter app is essentially a widget. So imagine we create a very, very, very, very simple Flutter application and it looks something like this inside the phone and everything inside here would be a widget. So we have all these different pieces of content but surrounding them all, first of all, would be what's known as a root widget. So that surrounds everything in the entire app. Then nested inside that widget we have this app bar widget at the top, this strip, and inside that we have nested a text widget which is the actual title of the app. So we can see this app kind of taking shape in this tree-like structure of widgets where we have one widget nested inside another and one widget nested inside this one etc. Now also on the page we have this content down here and surrounding that could be some kind of container widget and then inside the container widget would be a text widget. So we can see now this tree is taking shape and not many applications that you create using Flutter are going to be this simple and just contain a handful of widgets like this but you can see this general idea of what's known as a widget tree in Flutter. So a widget tree just describes the structure of widgets inside your app. Now there's loads and loads of different kinds of widgets pre-built into the Flutter framework that we can use out of the box. So things like a text widget or a button widget to create buttons, a row widget which is to do with the layout of different widgets in a row. Likewise we have a column widget for laying out different widgets in a column and also image widgets plus loads loads loads more which we're going to see as we go through the course. Now each of these widgets are also fully customizable and we can pass through different properties to these widgets to alter how they display on the screen. So for example our text widget could have a style property which would then determine how it looks, the font weight, things like that. We also have a text align property, an overflow property, max lines etc. Now a button widget could have a color property to define the color of the button, an elevation property to say whether it should be elevated off the screen or not and by how much, a disabled color property which is going to determine how it looks when the button is disabled, an enabled property to say whether it is enabled or not etc. So all of these different Flutter widgets they contain loads of different properties that we can define values for which is going to determine how they actually look and behave on the screen. Now at the end of the day all widgets are in Flutter are classes. Each widget has its own programmatic class which defines its behavior and also how it looks on the screen. Now the way we implement this kind of widgetry structure in Flutter is by using a programming language called Dart. Now Dart is a language developed by Google to build mobile, desktop and web applications. Really easy to pick up, it's similar to other object-oriented programming languages. It uses classes, functions, types etc and I will explain it as we start to write it in our code. But for those of you who want a sneak preview of how Dart looks to create a Flutter app, here we go. This is just from my GitHub repo. I've gone to the last lesson and just chosen a random Dart file to show you. We can see right here this is a class called HomeState and this is all the widget is at the end of the day, a class in Dart and down here we're using these different widgets to create our widget tree. So everything in blue down here, this is essentially a widget and you can see that they're nested inside each other and it's these different widgets with their different properties that are making up our widget tree inside Flutter. So we're going to learn all about this as we go through the rest of the course. But to begin with, what I'd like to do is just bring you up to speed with Dart in itself. I'm going to teach you all of the basics so that for the rest of the videos you can kind of pick it up as we go along.