GridView in Flutter With Full Examples

Gridview in flutter is a widget that arranges its children in a grid format, either in a scrollable or fixed manner. Let’s create a simple example of a scrollable GridView.

Here’s a step-by-step guide to Create GridView in Flutter

Create a new Flutter project or open an existing one.
Open the lib/main.dart file.
Import the necessary Flutter packages:

Example


GridView.count(
  primary: false,
  padding: const EdgeInsets.all(20),
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  crossAxisCount: 2,
  children: <Widget>[
    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...'),
    ),
  ],
)

Result of the above code is

Create a new Flutter widget that represents your app’s main entry point. This widget will be the root of your app and will contain the GridView:


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'GridView Example',
      home: MyGridView(),
    );
  }
}

Create a new widget called MyGridView that will contain your GridView. In this example, we’ll create a simple grid of colored boxes:


class MyGridView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GridView Example'),
      ),
      body: GridView.builder(
        // Create a grid with two columns
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
        ),
        // Provide a itemBuilder function to build grid items
        itemBuilder: (BuildContext context, int index) {
          // Replace this with your own widget for each grid item
          return Container(
            color: Colors.blueAccent,
            margin: EdgeInsets.all(8.0),
          );
        },
        // Specify the number of grid items
        itemCount: 10, // Replace with the number of items you want in your grid
      ),
    );
  }
}

In this code:

We use Scaffold to provide a basic app structure with an AppBar.
Inside the body, we use GridView.builder to create the GridView. gridDelegate is used to specify the grid layout. In this case, we’re using SliverGridDelegateWithFixedCrossAxisCount to create a grid with two columns.
The itemBuilder function is called for each grid item. You can replace the Container with your own widget.
itemCount specifies the number of items in your grid.