Whatโ€™s GridView?

A scrollable, 2D array of widgets. The main axis direction of a grid is the direction in which it scrolls.

Check the official documentation for more.

GridView explained for Web Developers

The most commonly used grid layouts are GridView.count, which creates a layout with a fixed number of tiles in the cross axis, and GridView.extent, which creates a layout with tiles that have a maximum cross-axis extent.

Example Code

Here is an example of how to use GridView:

GridView.count(
primary: false,
padding: const EdgeInsets.all(20),
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 2,
children: [
Container(
padding: const EdgeInsets.all(8),
color: Colors.teal[100],
child: const Text("He'd have you all unravel at the"),
),
Container(
padding: const EdgeInsets.all(8),
color: Colors.teal[200],
child: const Text('Heed not the rabble'),
),
Container(
padding: const EdgeInsets.all(8),
color: Colors.teal[300],
child: const Text('Sound of screams but the'),
),
Container(
padding: const EdgeInsets.all(8),
color: Colors.teal[400],
child: const Text('Who scream'),
),
Container(
padding: const EdgeInsets.all(8),
color: Colors.teal[500],
child: const Text('Revolution is coming...'),
),
Container(
padding: const EdgeInsets.all(8),
color: Colors.teal[600],
child: const Text('Revolution, they...'),
),
],
)

GridView Remarks

GridView is a powerful widget for creating grid layouts in Flutter, allowing for flexible and customizable arrangements of child widgets.

Bootstrap Your app with ShipFlutter

A fully customizable starter kit to seamlessly launch responsive Android, iOS, and Web apps with Flutter powered by Firebase and Vertex AI.