GridView | FlutterFlow University

grid view allows you to make layouts like this and this and this and this and no these aren't just photos these are actual layouts built in flutter flow so let me show you how to use this powerful widget so we've got a new page here and let's come in and add a grid View and we can't really see anything that's going on inside here so let's just drop in a container let's give it a nice color and then let's duplicate these with command D so we can actually see the grid beautiful okay let's go back into our grid View and let's look at some of these properties so you want to use a grid view when you need a grid with children that are the same aspect ratio so like square or 16 by nine like a YouTube thumbnail or maybe like horizontal or vertical photos now the first option here is whether you want your grid to scroll horizontally or vertically by default it Scrolls vertically so this means once this grid view overflows its parent which direction do you want it to scroll now here the parent is just our home page our scaffold our main body but of course if you wrap your grid view in something else say a container and let's just turn off this color and pull it out a little bit then it'll scroll whenever it's filled up that Max constraint from its parent so here it's set to Vertical but we could switch it and set it to horizontal in which case we would scroll horizontally now when I switch touch the axis you saw that the layout changed and we'll talk about that in a minute but let's switch it back to Vertical scrolling and let's get rid of this container for the time being Okay so we've set our main axis so it's scrolling vertically in the next property you want to set is this cross axis count and so if our main axis is vertical then our cross axis is horizontal and so you're telling the grid view hey how many cross axis sections or in this case how many columns do you want and we have it set to three now if we change this to let's say four that two things happen first we get four columns now but the other thing is that the size of our children changes and that's because our grid view passes down the size constraints to its children so the grid view is what determines the size of the children not the children themselves and this is the beauty of the grid view because this is what allows you to have a clean consistent grid okay so we have our scrolling direction we have how many columns we want now let's jump over our spacing and set our child aspect ratio and the aspect ratio is a property commonly used in film and photography that is the relationship between the width and the height of each child but expressed as a decimal or integer so you'll commonly see this in videos with like 1920 by 1080 or a 16 by 9 aspect ratio so these are square because by default we have a one to one one over one aspect ratio so one unit horizontally by one unit vertically but let's say you were displaying YouTube thumbnails here and you wanted a 16x9 aspect ratio well then you just pull out your calculator and do 16 divided by 9 and then use that decimal so 1.77 great but now our children are a little bit too small but remember the size of our children is determined by our access count so right now we've got four columns so let's bump it down to three and now we have more legible Grid or if you wanted to show more Tick Tock style thumbnails with their vertical aspect ratio this would just be inversed next you've got your spacing and the spacing is your tracks the gaps between your columns and your rows so now we're at 10 by 10 but maybe you want them tighter like in the Apple photos app so let's just put this down to two now maybe instead you want to horizontally scrolling interface and the main thing to keep in mind there is that when you switch it two things are going to change first the axes are gonna change so the main axis is horizontal and so the cross axis will not be columns but now it'll be rows so we have three so now each new child is going to be stacked horizontally and second the child aspect ratio will be switched and so now it's not width by height it's height by width so if we wanted to display those Tick Tock style vertical thumbnails then we would switch this next we've got our shrink wrap property and to show this let's simplify this layout a little bit okay so now we have the children not filling up the screen right here and you can see by this green border that grid view is taking up as much space as its parent allows which is just the home page right now but if you wanted to shrink down to its children you turn on shrink wrap and you can see that jumps up this is an important fix to know if your grid view is inside a widget like a column or a row or a list view that's looking for its child for its size so right now if I wrap my grid view in a column everything's fine and that's because I have shrink wrap turned on if I turn shrink wrap off the app's gonna crash so let's watch this go up in Flames boom flutter flow has reversed this action because it would have crashed the app and this is because the column is looking to the child for the height and the grid for you is saying I want all the height possible infinite height and so it crashes so if you're having this problem make sure that you have your grid view set to shrink wrap lastly let's take a look at some of those common layouts that use a grid view here we've got our Apple photos app and in this layout we've got a stack widget so that we can overlay this content up here and then we've got our grid view which is our main body here with all our images and just a little bit of spacing having small spacing is sometimes helpful too for tap targets so that anywhere the user Taps they're gonna get the image and so there's little or no Gap it would not register a click next we've got Apple podcasts this is a great example of the use of a more horizontal aspect ratio and when paired with a hero animation transition this is a really elegant UI solution next up calculator Yep this is built in a grid View and I've just got a grid of buttons really fun and easy to set up finally we've got the tick tock search page this is a great example of the vertical aspect ratio vertical video is very popular and this is an easy way to display a consistent grid of vertical images or videos we'd love to see what you build with grid view drop us a link in the comments or leave any questions you might have and we'll see you in the next video

Channel: FlutterFlow

Views: 20,711

Keywords: Flutter, FlutterFlow, No Code, No Code Tools, How To use FlutterFlow, Google Flutter, Dart, No Code App, FlutterFlow App Builder, No Code App Builder, GridView, Responsive Layouts, App Development, Cross-Axis Count, Child Aspect Ratio, Scrolling Direction, Shrink Wrap, Apple Photos, Apple Podcasts, Calculator, TikTok Search Page, UI Design, Mobile Development

Id: zZTCMyz8U1w

Length: 6min 58sec (418 seconds)

Published: Thu Mar 30 2023