Flutter Widgets (Grid View) The Whole Picture
By: Murtaza Sulaihi
Tags: Flutter App Development, Flutter Widget, Programming, Flutter, Flutter Ui

I would like to take this opportunity to thank Flutter Community for adding me as a writer to their publication, I posted my last article on TabBar & TabBarView under Flutter Community publication and I received a lot more exposure to this article than previous ones that I had posted earlier. Now I feel the next step is that we Indian writers should be able to join the Medium Partner program soon, I read a lot about it in past few days that Medium uses Stripe as their payment method and Stripe is now available in India but still, for some reason, the Partner Program has not opened for Indian writers, hope that happens soon.

What is Grid View?

It is a 2-Dimensional array which places its children into rows and column displaying the items in a tabular form. As the name suggests it is a Grid which is very similar to what we see in Android programming or any other programming language. The best place to see an example of Grid View is on Google Play Store or Apple App Store where we can see a list of applications in a vertical and horizontal scroll view. Similarly, if you see any marketplace application such as Amazon or Flipkart you will get to see Grid View format.

With the Grid View itself as an individual widget, there are 4 more options along with it which are…

GridView.count GridView.builder GridView.custom GridView.extent

Let us first look at the GridView widget in itself in as much detail as possible then it will be easier to understand the other 4 options because where almost all the properties remain the same, only the required property differs in each one.

Grid View Widget

The constructor of the GridView is as follows…

GridView(

scrollDirection: Axis.vertical, //default

reverse: false, //default

controller: ScrollController(),

primary: false,

physics: ,

shrinkWrap: true,

padding: EdgeInsets.all(5.0), @required

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

crossAxisCount: 3,

mainAxisSpacing: 5.0,

crossAxisSpacing: 5.0,

), OR

/* gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(

maxCrossAxisExtent: 125,

mainAxisSpacing: 5.0,

crossAxisSpacing: 5.0),*/ addAutomaticKeepAlives: true, //default

addRepaintBoundaries: true, //default

addSemanticIndexes: true, //default

semanticChildCount: 0,

cacheExtent: 0.0,

dragStartBehavior: DragStartBehavior.start,

clipBehavior: Clip.hardEdge,

keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.manual,

children: [] // List of Widgets

),

The following properties are important to understand while implementing the GridView.

scrollDirection: Axis.Vertical or Axis.Horizontal. Changes the direction of the scroll either up down or left to right. reverse: false. If it is set to true the whole list will be reversed and scroll position will start the bottom. primary: false. It determines whether the primary scroll is associated with the parent or not. physics: It is used to determine the scrolling behaviour when a user is scrolling and has reached the start or the end of the list. shrinkWrap: false. By default, the value is false. The scrollable list takes as much as space for scrolling in the scroll direction, which may cause a memory leak and reducing the performance of the application. If it is set to true then the scrollable list will be as big as its children widgets allows it to be. padding(EdgeInsets): It is used to specify space around the whole list of widgets. crossAxisSpacing: To add space between the children on its crossAxis, mainly meaning the horizontal spacing between the widgets. mainAxisSpacing: To add space between the children on its mainAxis, mainly meaning the vertical spacing between the widgets. gridDelegate: This is a required property for GridView widget. I have already mentioned in the above constructor two widgets that are associated with gridDelegate property. The main difference between the two is: SliverGridDelegateWithFixedCrossAxis has a property crossAxisCount , which takes in a number according to which GridView will draw the number of columns. If it is 2 it will show 2 columns, if it is 4 it will show 4 columns. Now SliverGridDelegateWithMaxCrossAxisExtent has a property maxCrossAxisExtent which takes in double pixels. What it really means is that it divides the available space between the widgets and forms the columns accordingly. For example, if the width of the screen is 500 pixels, and maxCrossAxisExtent is set to 150 pixels, each child widget will get a max of 150 pixels or less and so the delegate will draw 4 columns giving each child 125 pixels of space.

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

crossAxisCount: 3,

mainAxisSpacing: 5.0,

crossAxisSpacing: 5.0,

),

gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent

gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(

maxCrossAxisExtent: 200,

mainAxisSpacing: 5.0,

crossAxisSpacing: 5.0),

10. keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.Manual. The user will have to manually hide or dismiss the keyboard, and if it is set on onDrag the as soon as the user starts scrolling the keyboard will be dismissed automatically.