What is GridView count in flutter?

In our previous tutorial we’ve discussed how GridView widget in #flutter uses different constructors. However, each constructor serves the same purpose.

What is that?

Each GridView shows items in a tabular form.

To clarify, a GridView displays items in a two dimensional rows and columns. And GridView widget implements this material component.

Now, GridView.count constructor is no different. It serves the same purpose, although in a different way.

Let’s see the image first. Then we’ll try to understand how the code works.

GridView count in Flutter

What are the different types of GridView available in flutter?

Firstly, in most common cases, grid layouts use GridView.count constructor. But it creates a layout with a fixed number of tiles in the cross axis, as we see in the above image.

Secondly, to overcome this disadvantage, we use another GridView constructor. if we want to create a grid with a large number of children, we use GridView.builder constructor with either SliverGridDelegateWithFixedCrossAxisCount, or a SliverGridDelegateWithMaxCrossAxisExtent for the gridDelegate.

Finally, we’ll see how we’ve used GridView.count constructor to display items as we see in the above image.

Let’s see the code first.

import 'package:flutter/material.dart';

class GridviewCountExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Flutter GridView Count Constructor"),
        ),
        body: GridView.count(
          crossAxisCount: 3,
          crossAxisSpacing: 6.0,
          mainAxisSpacing: 10.0,
          children: List.generate(
            Books.length,
            (index) {
              return Center(
                child: SelectBook(
                  book: Books[index],
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

class Book {
  const Book({
    required this.title,
    required this.icon,
  });
  final String title;
  final IconData icon;
}

const List<Book> Books = const <Book>[
  const Book(
    title: 'Home Decor Guide',
    icon: Icons.home,
  ),
  const Book(
    title: 'City Guide Map',
    icon: Icons.map,
  ),
  const Book(
    title: 'Phone Directory',
    icon: Icons.phone,
  ),
  const Book(
    title: 'Camera Accessories',
    icon: Icons.camera_alt,
  ),
  const Book(
    title: 'Car Setting Manual',
    icon: Icons.car_rental_outlined,
  ),
];

class SelectBook extends StatelessWidget {
  const SelectBook({
    Key? key,
    required this.book,
  }) : super(key: key);
  final Book book;

  @override
  Widget build(BuildContext context) {
    final TextStyle? textStyle = TextStyle(
      fontFamily: 'Lato Bold',
      fontSize: 20,
      color: Colors.white,
    );
    return Card(
      color: Colors.red,
      child: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: Icon(
                book.icon,
                size: 50.0,
                color: textStyle!.color,
              ),
            ),
            Text(
              book.title,
              style: textStyle,
            ),
          ],
        ),
      ),
    );
  }
}

As the code shows, we have created a fixed List of book items. The GridView.count constructor through its children parameter generates a List that returns the List index.

With the help of that index we can get the other Book properties and display them on the screen.

How do you create a grid list in flutter?

With the help of GridView.count constructor creating a grid list is quite easy.

Watch this part of code.

body: GridView.count(
          crossAxisCount: 3,
          crossAxisSpacing: 6.0,
          mainAxisSpacing: 10.0,
          children: List.generate(
            Books.length,
            (index) {
              return Center(
                child: SelectBook(
                  book: Books[index],
                ),
              );
            },
          ),
        ),
      ),

We can see that GridView.count constructor has different parameters.

Moreover, we can create a grid list inside it. As we have already created a fixed list already, we can use that to display the items.

Consequently, we can see how different GridView.count parameters work.

In the above code, we’ve used GridView.count constructor parameter crossAxisCount.

The crossAxisCount specifies the number of columns in a grid view.

crossAxisCount: 3,

In our code, we’ve mentioned it as 3.

The next parameter we’ve used is crossAxisSpacing.

crossAxisSpacing: 6.0,

Each child widget, here we’ve used Icon and Text widgets to display the item properties, has pixels between them. The crossAxisSpacing specifies the pixels.

The same way we use the mainAxisSpacing to specify the number of pixels between each child widget listed in the main axis.

mainAxisSpacing: 10.0,

We’ve also seen the children parameter that returns a List. So we need to be careful about this when we return a List of items.

Sometimes, we need to map the list.

Besides, we have other useful parameters, such as, padding that specifies the space around the whole list of widgets.

On the other hand, the scrollDirection specifies the direction in which the items on GridView scrolls. By default, it scrolls in a vertical direction. We can also use the reverse parameter, which is a Boolean. If it is true, it will reverse the list in the opposite direction along the main axis.

Twitter