Hidden Widgets | FlutterFlow University

I have a confession to make I've told you a lie I told you that all your widgets are here in this UI Builder but there are actually other ones that you've already been using but they're hidden for instance these properties right here like padding expansion and Alignment these actually aren't properties on this container they're actually widgets so let me show you here if I just add some padding right here and come into the code View and select the container you can see here's our container and that's wrapped in a padding widget this is just how flutter does it and similarly if we come in here and add some alignment you can see that once again we have an align widget that wraps our padding that wraps our container so in this video we're going to talk about two things why flutter flow hide some widgets and why it matters like why are we making a video about this so first why do we hide them now I'm being a little bit cheeky because it's not so much that we hide them but that we expose them as properties so nothing is lost it's just how you access them okay but why do we do it this way well think about a scenario like this and let me make this bigger here and on this page you can see we've got tons of widgets already now you can imagine for instance with this text widget right here we've got some padding on the top and if you go to this one we've got some padding there and we've got some padding here as well and if all of these were not just text widgets but padding and then text widgets let alone if you had anything else like expansion or alignment your widget tree would be huge and it would become hard to find things and change them and think about when you're dragging and reordering widgets it would just be a mess so by exposing these as properties on widgets it cleans up the widget tree and helps you to work faster there's also some logic to it because especially if you're coming from a web design background you normally think of something like padding as a property on something here a text widget that is we think about this as not primarily another thing but a feature of this text widget so there is a logic that makes sense to a lot of designers and developers so that's why flutter flow hides them to help you work faster and more efficiently okay but why do we need to know about this well let me give you an example right here so here we've got a container and a column and if we look at the structure of it we can see that the main axis alignment is to the top and the cross axis is at the start so it should be over here and if you remember our rule from our previous layout video the parent sets the position so why isn't this container over here if we click on it we can see that we've got an alignment set to Center okay but still I thought the parent sets the position now here's an example of where understanding that this alignment is another widget that wraps this widget is going to be helpful because in reality the Align widget that's wrapping our container and we can just take a quick look at it right here our align wraps our container our line widget is taking up the full width of this column and so when the column is positioning the children it's not positioning a child that's 100 by 100 pixels the way it looks here but it's actually positioning a child that's the full width like this and so we can visualize this by having this full width and we come up to our column and we see that this is aligned to the left or the start that's actually what it's doing because it's the full width and of course these won't make any difference because it's the full width okay but how did I know that that align widget did that well I just went into the flutter documentation here and in this line right here it says this widget will be as big as possible if the dimensions are constrained well in a column the width is constrained by the screen but the height is unconstrained so it tries to be as big as possible for the width and once you understand that then this layout makes sense but without knowing that there was this widget in between the container and the column this type of situation could be confusing so if you're seeing a layout that's confusing and you've worked through those three principles we looked at in the previous video then you can always check in the code to see if there are any other widgets that are being added and that's the one tiny lie I've been telling you

Channel: FlutterFlow

Views: 13,376

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, hidden widgets

Id: iMc1m-l7eyw

Length: 4min 49sec (289 seconds)

Published: Fri Jun 23 2023