The Widget Tree | FlutterFlow University

let's talk about the widget tree and that's this icon right here now your UI might look a little bit different both over here in this panel and with these options right here and that's because flutterflow gives you the option as to how you want this laid out that is you can have your pages and your widget Tree in this split panel right here or you can just have your widget tree here and then a page icon is inserted into this nav and so you can go through it right here and you switch between those two views with this icon right here and so when I click that it splits it into two panes and when I click this you're gonna see that page selector being added right here okay so your widget tree is where you can see all the widgets on your page and their structure so right now we only have an app bar and the home page but if we add in other widgets through this button right here and let's drag this up and let's add in a container you can see that we've got these lines here that are indicating the scope the level in the hierarchy so if we collapse this down right now we can see that we've just got our home page with our column for our body and our app bar right here and the more items you add in here you'll see the level that they're at by the lines and these indentations right here now you can see as I added in additional widgets some of them have this icon right here this add a child to this widget and some don't and that's because flutter flow automatically knows which widgets can accept children and which can't so if I add a text widget in here you're going to see that it doesn't have that icon now just as you can add widgets onto your canvas here you can also add them onto your widget tree so if I want to pull up my UI Builder I'm just going to use the shortcut command F and it'll pop this out and then I can just drag in widgets in here now when I drag them in you'll get this animating icon right here and there are two things to understand about this Behavior first the main reference so when you drag in a widget here here there's going to be one that's highlighted and whatever highlighted widget that is that's the main reference widget for when you're dragging it in so here I'm referencing the container here I'm referencing this text widget and so on now after you see that main reference widget then you can understand the little icon right here because that icon is telling you when I release my mouse when I drop this thing in am I adding it in as a sibling to the reference widget or as a child and the purple and the two equal bars are communicating a sibling relationship whereas this bottom shorter bar is indicating a child and the reason these cycle between these two is because when I'm adding a widget in sometimes I want to add it in as a sibling and sometimes as a child and the order is important so when you drag it over something if it can be a child the first option will always be a child so let's say I want to drag this text into the column and I do it quickly it'll always first add it in as a child so I can just keep on adding things in here and it'll always be added as a child it's only if I hold it longer that it'll be added as a sibling so you can remember children first now if I were trying to add this as a sibling here it's not going to let me because sometimes the actions that you take the organizations that you want to have are not allowed by flutter flow but it doesn't just error out you get these helpful pop-up Windows to indicate to you both what the problem is and how to fix it so here I tried to add in a sibling to this column well that violates flutter's rule that the root widget can only have one child and I already have a column here so I can't have another one so it didn't just stop the action but it explained to me the problem right here and gave me some options to how to fix it that is flutter flow is saying hey if you want to have the container you were dragging in and the column as siblings they have to be wrapped in something else so you could wrap it in the column wrap it in a row or wrap it in a stack so let's wrap it in a column here and there we go now it just bumped this app bar up to the top but we can ignore that for now and let's just collapse these and so if we come down here that was our original column and now we've got our container added in as a sibling okay let's close this up and look at a few of these other buttons right here because there's two that we haven't looked at first is this expanded View and this is going to do two things the primary thing it does is it collapses the last child so sometimes your widget trees can get very long and complex and this is an easy way to simplify those last children so let me open this up right here and you can see that we've got the last child in this layout is this text inside this container so if I click it right here it's going to collapse this now in this layout it doesn't really matter this matters when things are getting really complex you can also use this if you have everything collapsed and you want to open everything up so I've got everything collapsed right here and I just open that up now you can see everything lastly we've got this lock icon and this doesn't do what you might think it does it doesn't lock widgets so you can't edit them what it does is it overrides the default pattern for when you select widgets now that is by default when you click on a widget the canvas will scroll to that widget that is when you select a widget on the canvas your widget tree will scroll there automatically let me show you how this works and we're going to need another page for it so we're just going to grab a template page let's grab this dashboard right here and let's come back to our widget tree you can see we've got a lot of widgets here so if I click one down here we automatically scroll to that widget and if you don't want that behavior you can just click this on and it won't scroll like that now why would you use this normally I keep it unlocked because I want to see where I am in the widget tree but sometimes you don't want that behavior for instance if you're doing work on one section over here maybe I'm working on this widget right down here but I have to quickly change something and I want to keep this in view that might be helpful to turn on Okay so a few other things with this widget tree just as with a canvas you can drag and reorder items in the widget tree and that sibling child UI Behavior will work the same as when you're dragging widgets in also you can right click on widgets and you get all of the same options as you do when you right click on a widget on the canvas now you'll often find yourself working in the widget tree a lot because it's the easiest way to see the hierarchy of elements and sometimes you don't know if you have the right left level of item to reorder so for instance in this UI right here I've got this row let's turn this off so we can actually scroll to one of these rows and maybe I wanted to reorder these tasks right here well you can see I clicked on this row but it's actually not the top level element so let's collapse this right here and you can see that we've got another row in here and these rows are wrapped in this container presumably for styling reasons that is to give it a background color and if I just clicked it on the canvas and tried to reorder it this would mess up my design if I want to do this properly on the canvas I could right click and see the hierarchy but even here you don't have the most clarity about the structure of your widget tree that's why working in the widget tree is very helpful so now I can see oh my top level items are these containers and so I can just close these up and wrap them in like this so then when you reorder them it's clear what's going on and that you're reordering them properly finally I'm going to show you two kind of secret tips the first one is that you can copy your root widget and paste that into another page so here I've got my root dashboard widget and I just do command C and let's just make a new blank page and if I select my root widget I can just paste it in but we get an error because you can't copy a page into a non-empty page so first you just have to delete the widgets in here and then you can paste in the page the last secret tip is that you can multi-select and change properties so I'm going to click on the 16 this 16 and this 16 and we know they're multi-selected because of two reasons first we get the multi-select boxes over here and over here we can see multi-selected and so I'm going to come down here and I'm just going to change the font weight to bold and just like that I've worked three times faster now one thing to note about this is that this will work with the properties but not these padding and Alignment widgets now one quick tip if you have a fairly complex widget tree you can search for your widgets but this is only if you have been practicing good naming conventions and you've been naming your widgets up in here with whatever widget is selected and if you have when you search flutterflow will give you this nice UI of Bolding the type and making it white so you can see what it's actually found and that's the widget Tree in flutterflow

Channel: FlutterFlow

Views: 16,782

Keywords: FlutterFlow, No Code, No Code Tools, How To use FlutterFlow, No Code App, FlutterFlow App Builder, No Code App Builder, FlutterFlow University, flutterflow tutorial, widget tree

Id: sWDpn3Kxjqc

Length: 9min 20sec (560 seconds)

Published: Tue Jun 13 2023