When to use GridView and ListView in flutter since they do the same thing?

Question

What is the differentiation of ListView and GridView? ListView.builder, ListView.separated, Listview.custom vs GridView.builder, GridView.count, GridView.extent

Answer 1

They are not the same thing.

ListView is for one directional way of showing things e.g. list or image carousel.

GridView on the other hand is ready for 2D display of things, e.g. for photo gallery .

Answer 2

You can take a look at the official docs for the difference. Let's see how they're defined in the documentation:

GirdView. (Video):

A scrollable, 2D array of widgets.

ListView. (Video):

A scrollable list of widgets arranged linearly.

Answer 3

ListView vs GridView

ListView: The children are laid out one-dimensionally (direction can be horizontal or vertical).

GridView: The children are laid out two-dimensionally. Even if you don't use the properties that make it visually 2D (by setting crossAxisCount: 1), it's still considered 2D.

Different ListView Constructors

ListView

ListView(
    children: [allItems],
);

ListView.builder

It creates a list of items that are easily generated or otherwise need to be dynamically created.

ListView.builder(
    itemBuilder: (context, index) => Text("Item $index"),
    itemCount: 10, // not required
);

ListView.separated

Similar to ListView.builder. It takes itemBuilder and separatorBuilder to create items and separators dynamically.

ListView.separated(
    itemBuilder: (context, index) => Text("Item $index"),
    separatorBuilder: (context, index) => Divider(),
    itemCount: 10, // not required
);

If itemCount is not specified, it will create an infinite amount of children as the user scrolls.

ListView.custom

To use a custom SliverChildDelegate. It takes a childrenDelegate, which provides the ability to customize additional aspects of the child model.

ListView.custom(
    childrenDelegate: mySliverChildDelegate,
);

Different GridView Constructors

GridView.count

It creates a layout with a fixed number of tiles in the cross axis.

GridView.count(
    crossAxisCount: 2, // how many items you want across the grid
    children: [allItems],
);

GridView.extent

It creates a layout with tiles that have a maximum cross-axis extent.

GridView.extent(
    maxCrossAxisExtent: 90.0, // maximum space each child can occupy
    children: [allItems],
);

GridView.builder

To create a grid with a large (or infinite) number of children.

Use a SliverGridDelegateWithFixedCrossAxisCount or a SliverGridDelegateWithMaxCrossAxisExtent for the gridDelegate parameter.

GridView.builder(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
    ),
    itemCount: 6,
    itemBuilder: (BuildContext context, int index) {
        return itemWidget;
    }
);

GridView.custom

To use a custom SliverChildDelegate.

GridView.custom(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
    ),
    childrenDelegate: mySliverChildDelegate,
);

Note:

• Constructors GridView, GridView.builder, and GridView.custom explicitly require a ‘grid delegate’ to be passed to the named parameter, gridDelegate.

• While the other constructors, GridView.count and GridView.extent, create such a class object for you.

References:

• Flutter documentation for ListView Class and GridView Class

• YouTube videos on ListView and GridView by flutter.

• Look at this amazing article for an in-depth look at the GridView widget by Greg Perry.