GridView in Flutter

Create Free Backend With Appwrite

GridView In Flutter

In Flutter, GridView is a versatile widget that allows the creation of grid layouts. It’s an essential widget when you need to display items in a two-dimensional list. GridView is ideal for situations where you want to present data in a visually appealing and organized manner, such as in photo galleries, product listings, or dashboard menus.

Example 1: Photo Gallery App

In this example, you will build a simple photo gallery app using GridView, demonstrating how to display a collection of images in a grid format.

GridView.count(
  crossAxisCount: 3,
  children:[
    Image.network('https://picsum.photos/200?image=25'),
    Image.network('https://picsum.photos/200?image=26'),
    Image.network('https://picsum.photos/200?image=27'),
    Image.network('https://picsum.photos/200?image=28'),
    Image.network('https://picsum.photos/200?image=29'),
    Image.network('https://picsum.photos/200?image=30'),
    // Add more images as needed
  ],
)

Run Online

Example 2: Ecommerce Product Listing Page

In this example below, you will learn how to create an ecommerce product listing page using GridView, displaying products in a grid with their images and details.

GridView.count(
  crossAxisCount: 2,
  children:[
    Card(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children:[
          Image.network('https://picsum.photos/200?image=25', height: 150, width: 150),
          const Text('Product 1'),
          const Text('Price: \$100'),
        ],
      ),
    ),
    Card(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children:[
          Image.network('https://picsum.photos/200?image=25', height: 150, width: 150),
          const Text('Product 2'),
          const Text('Price: \$150'),
        ],
      ),
    ),
    // Add more product cards as needed
  ],
)

Run Online

In this example below, you will learn how to create a simple home dashboard app with menu categories using GridView.

GridView.count(
            crossAxisCount: 2,
            children: [
              MaterialButton(
                onPressed: () {/* Handle click */},
                child: const Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.category),
                    Text('Category 1'),
                  ],
                ),
              ),
              MaterialButton(
                onPressed: () {/* Handle click */},
                child: const Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.category),
                    Text('Category 2'),
                  ],
                ),
              ),
              // Add more categories as needed
            ],
)

Run Online

Challenge

Create a simple photo gallery app using GridView. Display images in a grid format with 3 columns and 5 rows.

GridView in Flutter