Flutter Tutorial for Beginners #2 - Flutter Overview

Key Takeaways

alright then gang so if there's one concept I want you to fully understand by the end of this video it's gonna 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 okay so we have all these different pieces of contents 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 up kind of taking shape in this tree like structure of widgets well 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 real 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 and overflow property max lines etc now a bottom 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 are disabled color property which is going to determine how it looks when the button is disabled and enabled property to say whether it is enabled or not etc so all of these different flutter widgets they contain all those are 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 widget tree structure in flutter is by using a programming language called dart now that 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 doubt 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 home state and this is all of which 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