GridView Builder Widget

Introduction of GridView Builder Widget

In Flutter, the GridView builder widget is used to create a scrollable, two-dimensional array of widgets. It is a powerful tool for displaying a collection of items in a grid format.

Below is a brief explanation of the GridView builder widget with key properties:

gridDelegate: Defines the layout of the grid, including the number of columns, their spacing, and the aspect ratio of the items.

GridView.builder(
  itemCount: 16,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
    crossAxisSpacing: 8.0,
    mainAxisSpacing: 6.0,
  ),
  itemBuilder: (BuildContext context, int index) {
    return Container(
      height: 50,
      width: 50,
      color: Color.fromARGB(255, 15, 107, 76),
    );
  },
),

itemBuilder: A callback that specifies the widget to be built for each item in the grid.

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 8.0, 
    mainAxisSpacing: 6.0,
  ),
  itemBuilder: (BuildContext context, int index) {
    return Container(
      height: 50,
      width: 50,
      color: Color.fromARGB(255, 15, 107, 76),
    );
  },
),

itemCount: The number of items in the grid.

GridView.builder(
  itemCount: 10,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 8.0,
    mainAxisSpacing: 6.0,
  ),
  itemBuilder: (BuildContext context, int index) {
    return Container(
      height: 50,
      width: 50,
      color: Color.fromARGB(255, 15, 107, 76),
    );
  },
),

scrollDirection: Specifies the scrolling direction of the grid. It can be either Axis.horizontal or Axis.vertical.

GridView.builder(
  scrollDirection: Axis.horizontal,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 8.0,
    mainAxisSpacing: 6.0,
  ),
  itemBuilder: (BuildContext context, int index) {
    return Container(
      height: 50,
      width: 50,
      color: Color.fromARGB(255, 15, 107, 76),
    );
  },
),

physics: Determines the scrolling physics applied to the grid. Commonly used physics include BouncingScrollPhysics and ClampingScrollPhysics.

GridView.builder(
  physics: BouncingScrollPhysics(),
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 8.0,
    mainAxisSpacing: 6.0,
  ),
  itemBuilder: (BuildContext context, int index) {
    return Container(
      height: 50,
      width: 50,
      color: Color.fromARGB(255, 15, 107, 76),
    );
  },
),

shrinkWrap: When set to true, the GridView builder widget will be sized to its contents. Use it when the GridView is a child of another scrollable widget.

GridView.builder(
  shrinkWrap: true,
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2,
    crossAxisSpacing: 8.0,
    mainAxisSpacing: 6.0,
  ),
  itemBuilder: (BuildContext context, int index) {
    return Container(
      height: 50,
      width: 50,
      color: Color.fromARGB(255, 15, 107, 76),
    );
  },
),

Final Code: This is the final code with the combination of some above GridView Builder Widget properties.

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: GridView.builder(
        itemCount: 12,
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
        itemBuilder: (context, index) {
          return Padding(
            padding: const EdgeInsets.all(6.0),
            child: Container(
              height: 50,
              width: 50,
              color: Colors.orange,
            ),
          );
        },
      ),
    );
  }
}

These properties offer flexibility in designing grids with various layouts and behaviors. By combining them, you can create visually appealing and responsive grid-based interfaces in Flutter.

Thank for visiting Hybrid App Development
Posted by Hussam HM