Example of GridView Builder in Flutter

Here is an example of using GridView Builder in Flutter.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GridViewExample(),
    );
  }
}

class GridViewExample extends StatefulWidget {
  @override
  _GridViewExampleState createState() => _GridViewExampleState();
}

class _GridViewExampleState extends State<GridViewExample> {
  final List<int> numbers = List.generate(100, (index) => index);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GridView Example'),
      ),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 3,
        ),
        itemCount: numbers.length,
        itemBuilder: (context, index) {
          return Container(
            margin: EdgeInsets.all(8),
            color: Colors.blue[100 + (index % 9)],
            child: Center(child: Text(numbers[index].toString())),
          );
        },
      ),
    );
  }
}

This example creates a GridView with three columns, and uses GridView.builder to generate 100 items. Each item is represented by a blue-colored container with the number inside it.

You can customize the grid layout by using different values for the following parameters:

• crossAxisCount: The number of columns in the grid.
• mainAxisSpacing, crossAxisSpacing: The spacing between rows and columns, respectively.
• childAspectRatio: The aspect ratio of the child widgets (e.g. how wide they are compared to their height).

Note that you can also use SliverGridDelegateWithMaxCrossAxisExtent instead of SliverGridDelegateWithFixedCrossAxisCount if you want to specify a maximum cross-axis extent instead of a fixed count.