Master Flutter Gridview.extent: Everything You Need To Know!

welcome to Flat teacher we already seen grid View and grid. count in previous sessions in this session I'm going to explain grid. extend with its properties and exact use in platter applications so without wasting time let's get [Music] started while dealing with grid layouts sometimes in application instead of fixed number of grids in a cross AIS we need grid of certain maximum size flutter has given grid without Exchange to achieve this in your application basically grid. count is the name Constructor of grid class that allows us to create two dimensional scrollable area of widgets in the form of grid where each grid can have maximum extend in Cross axis and based on this extend flutter will decide the number of grids in Cross axis let's understand this practically let me Define a function called my box which I will use as a tile in a grid from here return return a container with with some color and margin I'm going to use gr. extend as a body of scaffold there's a property called children that takes the list of digets which are intended to show as a tile in the grid here let me Place some containers through the function my box Max cross axis extend is required property that decides the size of each tile in a cross axis in this example it's the width of grid let me get clear about the different axis width and height of the tile here when you grid we have should direction of vertical then that vertical Direction represents the main axis and the horizontal axis is the cross axis on other hand when your grid view has a scroll direction of horizontal then that direction represents the main axis whereas the another direction that is the vertical Direction here represents the cross axis of your grid let's use a value say 150 here let me save here and you can see here I have got nice grid where each row has got three tiles guys here the value 150 doesn't means exact at 150 pixels here it is the maximum extent that is it's the maximum size that flutter can provide to your tile based on the available space in a cross axis flutter will decides the extent that is size and it tries to provide equal extent for each tile so that we should have nice symmetric UI on your screen now for better understanding let me open the command pallet and here we have to type the d d tool and let's open this d d tool in the Chrome let's click on this grid View and you can observe here my grid view has got width of 423 pixels here and when I click on a container that is the tile inside my grid it has got the width of 141 pixels here so if You observe carefully I have given Max extend of 150 pixels so even though flut has not given that exact 150 pixels to tile instead it has given 141 pixels so if you try to multiply by three you will find that you will get this specific width of the grid that is the uh 4 23 so the reason behind this is flutter tries to have equal size for each G so that uh it should have nice UI representation of G in your screen so this is what when we have value 150 so instead of 150 let me change the value to say 300 let's change this value to say 300 and let's save the code you can see we have got only two GDs in each row so let's understand this inside d d tool we again need to click on The gri View so one second click here you can see we still have the same VI here that is 423 for uh the entire gr view when I click on container so you can obser here it has got the width of 211 so uh it's again important to note that it has not given exact 300 pixel instead it has adjusted your ties so that that should be a proper or uniform representation of tiles on uui let me rotate my phone and let's see what happens uh inside the d d tool so let me arrange my phone properly here nice and let's click on the grid view now definitely you can see here my G view has got the width of uh 83 pixels here and let's click on a container you can see now flutter has given the width of 267 pixels let's go back to Value 150 and for understanding for the properties I want to commend this margin and let's save the code you can see here there is no margin of spacing among the tiles we can apply uh spacing among the tiles we can use main access spacing that is going to apply spacing among the main axis so let's say it Val to 16 now I hope you understood then we can also apply spacing for the cross axis Also let's use value eight so that you can have some understanding that there's the difference between main AIS spacing and cross a spacing here we can also apply padding for your entire grid view for this we have option called padding let's say it's to say AGS do all and let me place the value of the padding 24 pixel across entire grid you can OB by default your grid view Scrolls only in a vertical Direction so if if you want to change that direction then there is option called scroll direction for this we have to pass the value say axis dot horizontal so it will change vertical to horizontal now I need to rotate this one in the horizontal direction we can also change the sequence of tiles that are shown on the UI for this we option called say reverse so we have to Simply write here say reverse true and you will observe here that the sequence of tile will get change so basically you not getting any changes here because all my tiles have same Ur but when we have a specific UI for each and every tile then definitely you will realize the change for reverse with true and without true if you obser carefully you can find each tile has got exactly same width and same height now there's a property called child aspect ratio uh it is basically used to control the size of tile in main axis so as my list view has not given any SC Direction because I have simply commented this one so by default it has Crow direction of vertical so that's why if I want to control the size of tile in main axis that is I want to control the height of tile we can make the use of this child aspect ratio it is a ratio of cross axis to main axis extent for each tile okay its value must be between 0.0 to 1.0 so if I pass a value one here it means each TI will have exactly same width and same height but if I change value to say 0.5 it means the height of tile is double than its available width and when I change to say it say 2 point mean 0.25 so definitely it will provide the height of tile uh four times compared to its width we all got a controller using which we can control the grid View programmatically and response to various user scroll operations performed by the user there's again a nice property called C extend that has the impact on the performance of GD view viewboard has got the area before and after this visible area in order to catch the items that is the tiles that are about to get visible when user Scrolls the list upwards or downwards for example when you set the value of this catch extend to 500 it means flutter can catch those many tiles in memory that can be presented or that can be shown inside this 500 pixels at the top side and bottom side of your visible area that's it for this video see you guys in the next video If you really found this video helpful and knowledgeable then don't forget to like share subscribe and hit the B notification button to get my latest videos

Channel: Flutter Teacher

Views: 672

Keywords: Flutter gridview.extent, Flutter grid view, gridview.extent in Flutter, gridview.extent, gridview.extent Flutter, flutter gridview extent, what is gridview.extent in flutter, when to use gridview.extent in flutter, flutter gridview.extent tutorial, gridview extent flutter, mastering gridview.extent, flutter dynamic gridview extent, control height of tile in gridview, complete tutorial for flutter gridview.extent, how to use flutter gridview.extent

Id: SUnhNCe-vOA

Length: 7min 23sec (443 seconds)

Published: Tue Jan 16 2024