okay then gangs so in this lesson I mainly want to talk about a key Concept in flutter before we actually start coding anything and that is the idea of widgets and you can think of most things in flutter as being a widget now I mentioned in the last lesson that the argument we pass into the run app function this my app thing is a widget and this widget whatever it might be that we pass into the runapp function is known as the root widget of the application so if we take a look at that my
app widg where we Define it down here we can see that it's actually just a class and that's all widgets are in flutter at the end of the day they're just classes and you can see that this class extends the stateless widgets class meaning that it inherits all of the special functionality that a widget in flutter should have the stateless part basically means that this widget won't contain any state or data which changes over time or in response to something like user clicking on a button for that we have stateful widgets but we're going to
talk more about those later in the course anyway you can see also that we have a method in this class called build and we're overriding this method because it's also defined in the stateless widget class we inherit from but this build method is what's responsible for building this widget and is ultimately also responsible for what we see on the screen because inside this build method we have to return some kind of template or content in the form of a widget or a widget tree meaning a bunch of widgets nested within each other now this widget
or widget tree that we return is the material app widget in this case which we're going to learn about in the next lesson but built into flutter there's also widgets for pretty much any kind of content or layout feature that we might need to display on the screen so if we want to Output some text we could use a pre-built text widget if we want to Output an image we'd use an image widget if we need a container for a layout then we'd use a container widget or we'd use a column widget if we wanted
to Output a bunch of stuff in a column so pretty much anything we ever want to display to the screen there's going to be a widget for it and if there's not one already built into flutter for something you can just make your own custom widget as well so then a flutter application is primarily built from a bunch of these different widgets which come together to form a widget tree right now the root widget is the one that sits at the very top of this tree it's the one that we pass into that run app
function that we just saw in the main do file now the root widget could be called whatever you want for example my app like it's named in the start project but it could be something else and that root widget will have a child widget which could be a container widget for layout purposes maybe within that we might have a column widget as a child to display a column of different things on a screen now a column widget can have multiple children and they could be a text widget to display some text an image widget to
display an image and maybe a row widget to display a row of other things so the row widget just like the column widget can also have multiple children which all widgets themselves so for example another text widget and maybe a text button widget and then finally we might have a fo widget at the bottom of the column as well so you can see now following this pattern of widgets within widgets we're building up a tree likee structure of widget so in other words a widget tree all right and on on a screen this widget tree
might look something like this we have the root widget my app then inside that a container widget with some padding maybe around it the column with text and image widgets inside it and then we have a row widget below that with some more text and a button and then finally a footer widget at the bottom of the column so when you're making a flutter app you're essentially going to be making a widget tree like this made up of a bunch of different UI widgets now most of the those widgets are going to be pre-made widgets
built into the flutter framework like the container Widget the text Widget the image widget column row Etc there's loads and loads of built-in widgets like this that we can use but sometimes you'll also need to make your own custom widgets which themselves will probably return a widget tree for example this root widget my app isn't a built-in widget it's a custom widget that we create by using a class that inherits the stateless widget class and that class contain contains a build function which returns a widget tree made up of a few different widgets nested within
each other also in our example here we have a footer widget now that's not a built-in flutter widget that's just something I made up for this example and I would made that widget in my code using a class much like the my app widget we saw before and that class for the footer widget is going to have a build method that returns another widget tree that might look something like this it could be a row widget with three children text an image and maybe a logo widget as well so all I'm really doing is kind
of packaging three built-in flutter widgets into my own custom widget and then I can just drop that widget into any other widget tree where I need it does that make sense if you've ever used react before I guess this is a little bit like making a reusable component right that can be then dropped into the template wherever we need it so we're just making these kind of custom widgets anyway the takeaway points here are that one we make flutter apps by using widgets which form a widget tree okay two most of those widgets will be
built-in pre-made widgets for things like text images form fields and layout features like containers rows and columns and three some of the widgets might be customade widgets that we create by using a class with a build method which also returns its own widget tree okay now don't worry too much if that third point is a little bit foggy for now we're going to be looking at that in more detail as we go forward but just know that we can make these custom widgets using a class when we need to all right so now we know
a little bit more about what widgets are let's have a quick look at this St code again just to see if we can spot any widgets in action so first up we've got this root widget being passed into the Runa function we've seen that already and we can see that this root widget is actually a custom widget because we're making it right here using a class that extends stateless widget and it also has a build method which returns a widget itself and this is the way that custom widgets are made right using a class with
a build method that returns a widget or a widget Tree in this case it returns a widget called material app now this is a built-in widget and we're going to learn a little bit more about that in the next lesson but if we scroll down the file a little bit you're going to see that we also have another widget called my homepage nested within it right here and again we can see that this is a custom widget because we're using a class to make it which contains a build method again to build and return another
widget tree now we don't want to go through every single bit of code in this data project because in the next lesson we're actually going to be stripping this right back and starting from scratch because I think it's much easier to introduce and practice new Concepts and new features that way but just very quickly if we scroll right down we're going to see a bunch of built-in UI widgets like the appar widget for example the center widget we also have a column widget text widgets an icon widget Etc so all of these widgets are pre-built
widgets that we can just drop into The Code by the way these pre-made widgets are all originally made using classes right just like the custom ones that we make and each of these widgets is just us making an instance of that class and passing in some named arguments right in turn that class runs its Constructor takes in those arguments and it makes us an instance of that class that widget right and that's all there is to it so if you remember just one thing from this lesson it should be that flut apps are made using
widgets which are just dark classes which we can instanciate whenever we need them
