Flutter Tutorial for Beginners #13 - Flutter Outline & Shortcuts

or rather gangs so hopefully by now you should be getting a little used to creating widgets and creating very very simple layouts using a row or a column or combination of both now what I'd like to do is just sidestep for a few minutes and show you a few shortcuts and other tricks I was just going to show these in different videos but I thought it would be best to have a whole video to show you how to do this so first of all I want to show you the Action menu for each different widget that we create so we can see down here we've created all these different widgets right and seeing the future I wanted to place for example padding around one of them or I wanted to move it down the widget tree somewhere else and swap it with another one well that would be a lot of cutting and a lot of pasting and a lot of editing and it would be nice if there was a quicker way to do this unfortunately thanks to this Action menu for each different widget there is a quick way to do this so say for example I wanted to swap this container with this container but what I could do is I could just click on this container and then see this little light bulb that is the Action menu for this widget so if I click on this now I can see all of these different actions I can perform for this widget so I could say for example move widgets down so if I do that it's going to move it down underneath the other widget so now it's second over here and likewise I could grab this one click on that the Action menu and then I could go to move widget up like that awesome right so that's a quick little shortcut now say for example I want to add some padding around this one well I could just click on this go to the Action menu and say add padding and now we have padding around this thing over here and it's also applied the padding property for us with some edge insects so I could just change this every one or two I'm gonna save this and now we can see padding around that element the second one right here now if I want to remove the padding I could do I could just go to here and I could scroll down here and say replace widget with its children so that is basically it going to replace whatever this widget is that we're on the should menu for with whatever is child is so let me click on this again replace widget with its children and it now removes that padding that's pretty nice right okay so let me go and add padding to the top one over here I'm going to add padding and then I'm going to click on the padding again and click on this action menu and then I'm gonna go to wrap with new widget and now its wrapped in a new widget which I can call for example container so now we're wrapping the padding in a container I know that doesn't make much sense I'm just demonstrating what we can do with this action menu here the different chakras that we can take okay let me control Zed a few times just to get rid of that padding and the container so let's see what else we can do I'm going to click on this container again go to the Action menu and now I'm going to send to the widget so if we want to centralize something we can wrap it in a sensor with you and it does exactly the same it puts the container inside the child of this element of this widget rather so let me undo that again and let's have a look at what else we can do I'm gonna now say wrap with a row so now it puts it inside a row and we have children with a list of widgets and inside that we have the container so pretty awesome right these are pretty nice shortcuts for things that we might do quite commonly and they're gonna save us a lot of cutting and pasting and editing and all that just so that's really nice now we can also access these shortcuts from this thing over here the flutter outline so first of all this gives us a nice visual representation of our widget tree because it shows the different widgets that we have and when the nested it means it's a child widget of the parent above it so say for example we want to do something with this column widget over here or this container widget we can just select that and the automatically goes to that in the code so that's nice first of all and then we can right-click and we can do the same kind of thing over here so all of the different things we had over here we can now do over here as well and we also have shortcuts at the top these little buttons that one is for centralizing it put in a - widget around it this one is to add padding this one is to wrap it with a column this one a row and so forth and also move up and down right here okay so I know this was just a short little video but I really wanted to show you these different shortcuts because it's gonna save us a lot of time and I'm gonna be using them in the future as well so I wanted you to be quite familiar with them and not thinking hang on when I use one in the future so now we know how to do that in the next video what I'd like to talk about is expanded widgets which is another layout widget and also the Flex property

Channel: The Net Ninja

Views: 142,516

Keywords: flutter, flutter tutorial, flutter tutorial for beginners, flutter for beginners, tutorial, dart, dart tutorial, dart and flutter, dart flutter, dart tutorial for beginners, flutter vs react native, flutter outline, flutter shortcuts, action menu, flutter action menu

Id: RdPkFd6_fTA

Length: 5min 6sec (306 seconds)

Published: Mon Sep 02 2019