Flutter GridView

Flutter GridView is a widget that is similar to a 2-D Array in any programming language. As the name suggests, a GridView Widget is used when we have to display something on a Grid. We can display image, text, icon, etc on GridView. We can implement GridView in various ways in Flutter :

  • GridView.count()
  • GridView.builder()
  • GridView.custom()
  • GridView.extent()

GridView.count() is one which is used frequently and it is used when we already know the size of Grids. Whenever we have to implement GridView dynamically, we use GridView.builder(). Both are just like a normal array and dynamic array. In Flutter, the two GridView is mostly used.

GridView.count() is used with some named parameters. The properties that we can use with GridView.count() are: 

  • crossAxisCount: It defines the number of columns in GridView.
  • crossAxisSpacing: It defines the number pixels between each child listed along the cross axis.
  • mainAxisSpacing: It defines the number of pixels between each child listed along the main axis.
  • padding(EdgeInsetsGeometry): It defines the amount of space to surround the whole list of widgets.
  • primary: If true, it’s ‘Scroll Controller’ is obtained implicitly by the framework.
  • scrollDirection: It defines the direction in which the items on GridView will move, by default it is vertical.
  • reverse: If it is set to true, it simply reverse the list of widgets in opposite direction along the main axis.
  • physics: It determines how the list of widgets behave when the user reaches the end or the start of widget while scrolling.
  • shrinkWrap: By default, it’s value is false then the scrollable list take as much as space for scrolling in scroll direction which is not good because it takes memory that is wastage of memory and performance of app reduces and might give some error, so to avoid leakage of memory while scrolling, we wrap our children widgets using shrinkWrap by setting shrinkWrap to true and then scrollable list will be as big as it’s children widgets will allow. 
filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
  
void main() {
  runApp(GeeksForGeeks());
}
  
class GeeksForGeeks extends StatelessWidget {
  
  // This widget is the root of your application
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          backgroundColor: Colors.blueGrey[900],
          title: Center(
            child: Text(
              'Flutter GridView Demo',
              style: TextStyle(
                color: Colors.blueAccent,
                fontWeight: FontWeight.bold,
                fontSize: 30.0,
              ),
            ),
          ),
        ),
        body: GridView.count(
          crossAxisCount: 2,
          crossAxisSpacing: 10.0,
          mainAxisSpacing: 10.0,
          shrinkWrap: true,
          children: List.generate(20, (index) {
              return Padding(
                padding: const EdgeInsets.all(10.0),
                child: Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: NetworkImage('img.png'),
                      fit: BoxFit.cover,
                    ),
                    borderRadius: 
                    BorderRadius.all(Radius.circular(20.0),),
                  ),
                ),
              );
            },),
        ),
      ),
    );
  }
}

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

3


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.