In this video, you will learn about Flutter Reactive Framework along with building a basic app. So let’s get started!!
Thank you for watching! We’d love to know your thoughts in the comments section below. Also, don’t forget to hit the ‘like’ button and ‘subscribe’ to ‘Eduonix Learning Solutions’ for regular updates.
Follow Eduonix on other social networks:
■ Instagram: | @eduonix
hello then welcome back this flutter course where today we're gonna be starting our fourth unit where we're going to be going over the reactive framework and that way what that means in the context of flutter today we're gonna be going over just a basic application just to write a HelloWorld application going over the code just because in order to understand what a reactive framework means it's sort of how it works in flutter we need to first understand just a very basic idea of flutter and you know I mean another makes video we already know the basic idea because we went over that in the past couple of uh in the past couple of units but just the how to write a very basic floor application anyway then let's get right into this alright so the first thing we're gonna want to do is open up Android studio alright so let's give this a second to open up here we should already have I believe we do we do already have an a project created a flutter project created and everything set up for writing actual flutter applications there we go so you can see here we have a flutter age wanax course let's open that up and that's gonna open up this starter application that we that the flutter CLI created for us here so let's give this a second to load and there we go okay so let's go ahead now we can actually delete the my home page here so let's just delete that because we don't need it all right there we go and you can see here that everything starts here with a void main right so this is the main equate main class and here we just call this run app method let me go to get dependencies here you should see you see do see already how we have a pub spec so remember we went over pub spec here pub check it out um oh and we can actually inspect that you can see here that it has just a flutter dependency and things like that so yeah it's it's pretty cool so now we know what that with them but that does essentially anyway so here we have we have you know homepage here and we can actually go in and create a hello world app here by simply when we do run app we can just instead of doing new my app you can see here that it's a widget we can just remove that and instead of doing new my app you just do new and we don't actually even need new we just do new juice do text and then insert text in there so hello world all right and there we go simple as that so let's save that and now we can actually go ahead and run this so let's go we need to first of all select a device here let me go and go to the virtual device manager here and we already have a virtual device created all right there we go oh my gosh it's already running and have a it opened up in my second monitor here and I'm not 100% sure why but I had a I had a nature video of like some some deer or something playing from National Geographic okay there we go let me go to get it there we go so now it's here let me rotate this that's possible apparently it isn't it's not not wrote and rotating here let me move this over to the side here go back to the emulator alright well I can order it this way so I guess I'll do it like that alright there we go alright so now we got our emulator open up let me go and actually make this bigger if I can here let me make this text bigger so they can actually see all right there we go I made it bigger um now I can actually run this but before we do that let's wrap this in a material app because um we do need it because otherwise the text just won't work we have to have actual homepage here okay new material app and then here we're gonna do instead of text we're gonna do home and the home is gonna be the text hello world alright there we go so now it's going to run this and that's gonna run on this emulator here make sure you have it selected here so Android SDK build for x86 and that's gonna run it on this emulator then here we have the actual place where it's gonna run so here we have the main dart right there okay so let's give that a chance to install here and depending on your processor you know how powerful your processor is and maybe your memory how higher memory clocked is well how high your memory is clocked as well it may take a while but it we should there we go as you can see here we already got a gun we got hello world here alright and there we go so now that we got a basic hello world application running here let's you off a flutters hot restart feature or Harvey load so heart reloading it's more for our actual business logic if you want to reload business logic and we're gonna get through that later on but it's actually here it's most likely we're gonna we're gonna want to heart restart so let's remove this exclamation point here now to heart reload all we have to do is command s and that's gonna heart reload you can see here it says reloading if we open this outperforming Harvey loaded but they did it it didn't actually remove this exclamation port at the exclamation point for that we need to heart restart so we're gonna click on this button right here and that's gonna hot restart and there we go as you can see it removed that exclamation point now this is great you know but it just looked a little bit weird doesn't it so it just looks kind of kind of bad first of all we're gonna do a couple things here so first of all we're gonna wrap this text into a center widget okay that's gonna Center the text both horizontally and vertically so we're gonna do center and then child is going to be the text oh there we go and let's close that up there we go so we can now heart restart that and that's going to Center it there we go you can see it's centered that's already very nice and then next what we can do here is actually add a style here to the actual well notice a theme here to the actual material app so all we have to do for that is a theme instead of so we have home here let's also do theme and the theme is going to be new theme data and a new primary swapmeet color and then colors colors dot let's do green all right there we go all right there we go and then there's also add a comma here there we go okay so now let's go ahead and refresh that you're gonna get that is that this isn't actually going to do anything in order for this to actually do something we need to add one final widget here we need to wrap this Center widget in a scaffold widget we're gonna go over what all of these witches do scaffold there we go and let's go ahead and over here and add another one at our closing parenthesis there and then here we're gonna do body body is going to be the central alright there we go so now that we got that del maguey actually go to code here and then for reform at code with dart format let's click on that there we go it's going to reformat it make a little a little bit better and now let's finally restart perform the heart we start and you're gonna see what's gonna happen there we go so now it looks more like an application and we can even now if we really wanted to do something like like this so just thinking about how we can do it yeah let's do like this so instead the scaffold here we're also gonna add a app bar at bar there we go app bar and that's going to be app whoops bar it's gonna be a new app bar remember you don't need the new keyword though and the title whoops idol is going to be a text widget and let's just say my app all right there we go so that's gonna be the app bar and then yeah comma and then the body's gonna be the new Center so let's code it let's free format code with dart format there we go looking good and let's restart and you're gonna see here what that app bar is gonna do there we go it's gonna add that app all right there and you can see that it's green because we set the primary color to colors not green if we were to change it to something like I don't know maybe let's say blue and restart that you're gonna see that it's gonna change the color to blue there we go and you can see we can change that that's a very basic hello world application now in in flutter all right so you ready telling me great okay that's awesome we created a hello world application but I have no idea what any of these witches do well don't worry for that we have something called the widget catalog or widgets catalog so you can access it by going to flutter Daioh slash widgets and here we have all the different widgets that flutter actually has so let's say that we wanted to know like what the what the scaffold which it does right so it kind of kind of kind of doesn't it doesn't make much sense so let's search scaffold there we go and right we actually didn't we didn't search it in the correct place but if we do go into basics we can see that here we do have the scaffold right there so let's go and go to the documentation here and there we go so implements the basic material design visual layout structure there we go so this class provides api's for showing drawers snag bars and bottom sheets so that's actually the scaffold class actually what it does is it sort of adds some default styling to your application and for example allows us to add the app bar which which we look at which looks pretty good this is this part up here it allows us to you know it gives us a background color it adds some default text you know styling and so on and so on and we can see all these different properties that it has so we have an app bar background color body so this is the primary content of the scaffold bottom navigation bar and so on and so on and so you can see there's a lot of these and we can even go ahead and search for other stuff so we got so we understand what scaffold does what about some length text so we can see here we have text let's go to the documentation we have text a run of text with a single style so there we go so we have the text widget as well and we can see all the different properties as well so see here we can have we have a properties for data max lines overflow and so on and so on we have text style here that we can create and so on and so on so there are ton of different properties here and as you can see here when the with the constructor the default tech constructor actually takes data as a positional the first positional element remember we went over that when we took a look at dart constructors and this is where it essentially comes into a comes into play here so right here if we go to Android studio you can see that we have it as the you know in in we have the as of the first positional element so my apps that's actually the data that that it that it takes in there okay so that's the text that's the text class let's also take a look at the material app class I'm that can can make you a little bit a little bit confused or is the is a material app actually I think it's in material components here where is it where is it where is it there we go material app so let's take a look at the documentation for that so an application that uses material design there we go so the material app class essentially means that it's an application that uses material design and we have a bunch of properties here we have a builder so that's a whole separate topic that we can talk about color and so on and so on and you can see here that we have the home so the widget we have a home property here so this is the widget for the default route of the app so that's we're gonna be talking about navigation in a future a unit here but this essentially is the home widget this is the first thing that's going to display and in our case what a displays is the home widget if we go back to the application whoops I accidentally went back to the emulator there we go you can see here that what actually is displaying as a home is this scaffold right here so there we go that's actually what Dell what that does and I guess we can also take a look at theme data as well since that also may may confuse you and to look at this we can actually just go to theme here where's the theme there we go theme click on that and there we go we can see theme data theme let's click on that and there we go so now here we can see that theme data class and this holds the color and typography values for a material design design theme so use this class they're gonna figure out theme widgets there we go so this essentially allows us to this configure so that the default you know styles of our application so in our case we went ahead and we went ahead and assigned the primary color to color dot blue and in a result the scaffold usually used that primary color to create this app bar and make it blue by default there we go that's actually how how that works and let's also let's finally take a look at the app bar and I think that actually gonna be all yeah let's go to Google Chrome here let's take a look at the app bar class as well I believe there we go see material component widgets and here we have app bar let's go ahead and go to the documentation so a material design at bars there we go simple as that that's the macule design at bar and we can see here we have constructors for it we have properties and we see here that we have where is it where is it where is it can't can find out here one second I'm just looking for the title here there we go we have title here and this is the primary widget displayed in the app bar this is what we went ahead and inserted here if we go to Android studio we can take a look we have app bar title in and that's gonna be the new text whoops new text to my app and what we can do also is just wrap this text inside a center and then child is going to be text my app alright and there we go so let's that's gonna hot reload we should hurry start instead I'm sorry start and what are you gonna see what that's gonna do there we go it's gonna Center that title so yeah that's actually how the very basic idea of how we create you know UI is in a in in flutter you