Flutter Gridview

The GridView widget in Flutter is similar to a 2-D Array in programming languages. It's used to display widgets on a grid, such as images, text, or icons. GridView is utilised when we need to show items in a grid layout. It allows users to select items from the grid list by tapping on them.

There are different types of GridView :

• GridView.count()

• GridView.builder()

• GridView.custom()

• GridView.extent()
  

Properties of Flutter GridView.count

This is the most frequently used grid layout in Flutter because the grid's size is already known.Developers can specify a fixed number of rows and columns.

crossAxisCount

It determines the number of columns in GridView.

crossAxisSpacing

mainAxisSpacing

padding

physics

scrollDirection

shrinkWrap

reverse

Properties of GridView.builder

It is used when we want to display data dynamically. If the user wants to create a grid with a large (infinite) number of children, then they can use the GridView.builder() constructor because the builder is called only for those children that are actually visible.

itemCount

It is used to define the amount of data to be displayed.

gridDelegate

itemBuilder

Properties of GridView.extent

GridView.extent is a type of GridView in Flutter that creates a scrollable grid with flexible item sizes. It uses the available space to determine the size of the items, allowing you to create grids where the items can have different sizes based on their content or aspect ratio. Particularly useful for creating responsive grids that adapt to different screen sizes or display items with varying sizes.

maxCrossAxisExtent

Specifies the maximum extent (width for vertical scrolling or height for horizontal scrolling) of each item in the grid.

Allows for creating a grid with custom extent values, where each tile has a maximum cross-axis extent.

Practice with GridView widget

GridView.count Example

Flutter GridView.count

class GridViewCountExample extends StatelessWidget {

   GridViewCountExample({super.key});


  final List<String> imageUrls = [
    'https://picsum.photos/id/242/200/300',
    'https://picsum.photos/id/2/200/300',
    'https://picsum.photos/id/83/200/300',
    'https://picsum.photos/id/24/200/300',
    'https://picsum.photos/id/240/200/300',
    'https://picsum.photos/id/67/200/300',
    'https://picsum.photos/id/45/200/300',
  ];


  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GridView.count'),
        ),
        body: GridView.count(
          crossAxisCount: 2, // Number of columns
          children: imageUrls.map((imageUrl) => Image.network(imageUrl)).toList(),
        ),
      ),
    );
  }
}

GridView.builder Example

GridView.custom Example

GridView.extent example

Dynamic GridView