GridView Widget – Flutter Widget Guide By Flutter Agency

GridView Widget – Flutter Widget Guide By Flutter Agency

GridView Widget in Flutter is a used to display the data in two-dimensional rows and columns.users can choose any item by tapping on them.GridView Widget may contain Text Widget as item or Image widget as an item or it can be both as well depending on the user’s requirement.GridView Widget is scrollable so, we need to simply specify scrolling direction only.

Video Tutorial

Detail Explanation

Gridview has two ways to displays data as listed below :

1. GridView.count()
2. GridView.builder()

GridView.count()

GridView.count() is the most commonly used in Flutter. We will first implement it with a static example so you can understand it in better ways. create a new file and name it as GridviewExample.dart in a project which will extend Stateless widget.

Code snippet is as below :

GridView.count(
        primary: false,
        padding: const EdgeInsets.all(20),
        crossAxisSpacing: 5,
        mainAxisSpacing: 5,
        crossAxisCount: 3,
        children: <Widget>[
          Container(
            padding: const EdgeInsets.all(8),
            child: Center(
              child: const Text(' Block One'),
            ),
            color: Colors.teal[100],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: Center(
              child: const Text('Block Two'),
            ),
            color: Colors.teal[200],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: Center(
              child: const Text('Block Three'),
            ),
            color: Colors.teal[300],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: Center(
              child: const Text('Block Four'),
            ),
            color: Colors.teal[400],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: Center(
              child: const Text('Block Five'),
            ),
            color: Colors.teal[500],
          ),
          Container(
            padding: const EdgeInsets.all(8),
            child: Center(
              child: const Text('Block Six'),
            ),
            color: Colors.teal[600],
          ),  
        ],
      ),

Lets look at the GridView Widget properties that we have used in above example.

• itemCount : itemCount is used for the amount of data to be displayed.
• gridDelegate : gridDelegate is used to determine the grid or its divider.
• itemBuilder : itemBuilder is used to create items that will be displayed on the GridView.
• primary : primary will take true or false values and will define whether scrolling is associated with a parent or not.
• crossAxisSpacing : crossAxisSpacing will specify spacing between cross axis.
• mainAxisSpacing :  mainAxisSpacing will specify the spacing between main axis.
• crossAxisCount : crossAxisCount will specify the number of data in the cross axis.

 In our example, we are having three.

Grid view Sample

Gridview.builder()

Gridview.builder() : when a user wants to show data dynamically then the user can make use of this property. First, we need to places all images into the assets folder in the project structure then,we need to define image array like below :

      List<String> images = [
        "assets/flowers.jpg",
        "assets/nature.jpg",
        "assets/parrot.jpg",
        "assets/road.jpg",
        "assets/flowers.jpg",
        "assets/nature.jpg",
        "assets/parrot.jpg",
        "assets/road.jpg",
      ];

Code snippet will look like as below :

GridView.builder(
        itemCount: images.length,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
          crossAxisSpacing: 10.0,
          mainAxisSpacing: 10.0,
        ),
        itemBuilder: (BuildContext context, int index) {
          return Image.asset(images[index]);
        },
      ),

So our final output will look like below :

Images using Gridview.builder

Need more assistance?
Do contact us.