GridView in flutter

266

GridView is a widget that display the items in two dimensional array (i.e. row and column). It is used when we want to show the items in grid. The grid view widget can contains any widget like icons,text, image, e.t.c. to display grid layout depending upon the user requirement.

In this tutorial, we will discuss about gridview in flutter. Here, we will discuss with an example.

Constructor of Gridview.builder

(new) GridView GridView.builder({
  Key? key,
  Axis scrollDirection = Axis.vertical,
  bool reverse = false,
  ScrollController? controller,
  bool? primary,
  ScrollPhysics? physics,
  bool shrinkWrap = false,
  EdgeInsetsGeometry? padding,
  required SliverGridDelegate gridDelegate,
  required Widget Function(BuildContext, int) itemBuilder,
  int? itemCount,
  bool addAutomaticKeepAlives = true,
  bool addRepaintBoundaries = true,
  bool addSemanticIndexes = true,
  double? cacheExtent,
  int? semanticChildCount,
  DragStartBehavior dragStartBehavior = DragStartBehavior.start,
  ScrollViewKeyboardDismissBehavior keyboardDismissBehavior = ScrollViewKeyboardDismissBehavior.manual,
  String? restorationId,
  Clip clipBehavior = Clip.hardEdge,
})

Code Implementation

Here, we make grid_view.dart file under lib/views/grid_view.dart

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutterhopeprojects/Models/grid_data.dart';

class GridViewPage extends StatefulWidget {
  const GridViewPage({Key? key}) : super(key: key);

  @override
  State<GridViewPage> createState() => _GridViewPageState();
}

class _GridViewPageState extends State<GridViewPage> {
  Random random = Random();
  Color getColor() {
    return Color.fromARGB(random.nextInt(255), random.nextInt(255),
        random.nextInt(255), random.nextInt(255));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Grid View Example"),
        centerTitle: true,
      ),
      body: SafeArea(
          child: GridView.builder(
              itemCount: gridlist.length,
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3, crossAxisSpacing: 2, mainAxisSpacing: 2),
              itemBuilder: (context, index) {
                return Card(
                  color: getColor(),
                  elevation: 2,
                  child: Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        SizedBox(
                          height: 40,
                          width: 40,
                          child: gridlist[index].icon,
                        ),
                        const SizedBox(
                          height: 12.0,
                        ),
                        Text(gridlist[index].title.toString())
                      ],
                    ),
                  ),
                );
              })),
    );
  }
}

Gridview items are defined on the model folder by making grid_data.dart under libs/model/grid_data.dart

import 'package:flutter/material.dart';

class GridData {
  String? title;
  Icon? icon;

  GridData(this.title, this.icon);
}

final List<GridData> gridlist = [
  GridData("Home", const Icon(Icons.home)),
  GridData("Email", const Icon(Icons.email)),
  GridData("Alarm", const Icon(Icons.alarm)),
  GridData("Wallet", const Icon(Icons.wallet_giftcard)),
  GridData("Backup", const Icon(Icons.backup)),
  GridData("Book", const Icon(Icons.book)),
  GridData("Camera", const Icon(Icons.camera)),
  GridData("Person", const Icon(Icons.person)),
  GridData("Print", const Icon(Icons.print)),
  GridData("Phone", const Icon(Icons.phone)),
  GridData("Note", const Icon(Icons.note)),
  GridData("Music", const Icon(Icons.music_note)),
];

Outputs:

Here is the github link of this project:

https://github.com/NilamPathak578/flutterHopeProjects/tree/GridView

Thank you for reading this article. If you have any queries regarding any topic, feel free to share with us. We will try to solve your problems.

Happy Learning.

Leave A Reply

Your email address will not be published.