Flutter – Display a GridView Within an AlertDialog Box

AlertDialogs are useful Widgets in Flutter to attract the users attention to a particular message that is showing by the Alert Dialogs, GridView are efficient widgets to display items in a Grid like structure. To implement a GridView inside an AlertDialog in Flutter, you can create a custom dialog content widget that contains a GridView and then display this custom dialog using the showDialog method. In this article we are going to implement an GridView within an Alert Dialog. A sample video is given below to get an idea about what we are going to do in this article.

Basic Syntax of an GridView in Flutter

GridView(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 2, // Number of columns in the grid
    mainAxisSpacing: 10.0, // Spacing between rows
    crossAxisSpacing: 10.0, // Spacing between columns
    childAspectRatio: 1.0, // Width to height ratio for grid items
  ),
  children: <Widget>[
    // List of grid items
    GridTile(
      child: YourGridItemWidget(),
    ),
    // Add more GridTile widgets for other grid items
  ],
)

Basic Syntax of an Alert Dialog in Flutter

AlertDialog(
  title: Text('Dialog Title'), // Optional title
  content: Text('Dialog Content'), // Main content of the dialog
  actions: <Widget>[
    // List of action buttons
    TextButton(
      onPressed: () {
        // Action to perform when the button is pressed
      },
      child: Text('Button 1'),
    ),
    TextButton(
      onPressed: () {
        // Action to perform when the button is pressed
      },
      child: Text('Button 2'),
    ),
    // Add more TextButton widgets for additional actions
  ],
)

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Import the Package

First of all import material.dart file.

import 'package:flutter/material.dart';

Step 3: Execute the main Method

Here the execution of our app starts.

Dart

void main() {
  runApp(MyApp());
}

Step 4: Create MyApp Class

In this class we are going to implement the MaterialApp, here we are also set the Theme of our App.

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        // Set the app's primary theme color
        primarySwatch: Colors.green,
      ),
      debugShowCheckedModeBanner: false,
      title: 'GridView in AlertDialog Example',
      home: GridViewAlertDialogExample(),
    );
  }
}

Step 5: Create GridViewAlertDialogExample Class

In this step we are going to create a Button by clicking the AlertDialog with an Gridview will appear on the Screen. When the button is Clicked it calls the showGridViewDialog method then the method call CustomGridViewDialog class on which the GridView Within an Alert Dialog is Implemented.

Dart

class GridViewAlertDialogExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GridView in AlertDialog Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showGridViewDialog(context); // Show the GridView dialog
          },
          child: Text('Show GridView Dialog'),
        ),
      ),
    );
  }
}
void showGridViewDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (context) {
      return CustomGridViewDialog();
    },
  );
}

Step 6: Create CustomGridViewDialog Class

In this class we are going to implement a Gridview Within an AlertDialog.

AlertDialog(
      title: Text('GridView Inside AlertDialog'),
      content: Container(
        width: double.maxFinite,
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: 1.0,
          ),
          itemCount: 6,
          itemBuilder: (context, index) {
            return Card(
              elevation: 3, // Add elevation for the card effect
              margin: EdgeInsets.all(8), // Add margin for spacing between cards
              child: InkWell(
                onTap: () {
                  print('Tapped on Item $index');
                },
                child: Center(
                  child: Text('Item $index'),
                ),
              ),
            );
          },
        ),
      ),
      actions: <Widget>[
        ElevatedButton(
          onPressed: () {
            Navigator.of(context).pop(); // Close the dialog
          },
          child: Text('Close'),
        ),
      ],
    );

Dart

class CustomGridViewDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text('GridView Inside AlertDialog'),
      content: Container(
        width: double.maxFinite,
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: 1.0,
          ),
          itemCount: 6,
          itemBuilder: (context, index) {
            return Card(
              elevation: 3, // Add elevation for the card effect
              margin: EdgeInsets.all(8), // Add margin for spacing between cards
              child: InkWell(
                onTap: () {
                  print('Tapped on Item $index');
                },
                child: Center(
                  child: Text('Item $index'),
                ),
              ),
            );
          },
        ),
      ),
      actions: <Widget>[
        ElevatedButton(
          onPressed: () {
            Navigator.of(context).pop(); // Close the dialog
          },
          child: Text('Close'),
        ),
      ],
    );
  }
}

Here is the full Code of main.dart file:

Dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        // Set the app's primary theme color
        primarySwatch: Colors.green,
      ),
      debugShowCheckedModeBanner: false, // Disable debug banner
      title: 'GridView in AlertDialog Example',
      home: GridViewAlertDialogExample(),
    );
  }
}

class GridViewAlertDialogExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GridView in AlertDialog Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showGridViewDialog(context); // Show the GridView dialog
          },
          child: Text('Show GridView Dialog'),
        ),
      ),
    );
  }
}
void showGridViewDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (context) {
      return CustomGridViewDialog();
    },
  );
}

class CustomGridViewDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text('GridView Inside AlertDialog'),
      content: Container(
        width: double.maxFinite,
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            childAspectRatio: 1.0,
          ),
          itemCount: 6,
          itemBuilder: (context, index) {
            return Card(
              elevation: 3, // Add elevation for the card effect
              margin: EdgeInsets.all(8), // Add margin for spacing between cards
              child: InkWell(
                onTap: () {
                  print('Tapped on Item $index');
                },
                child: Center(
                  child: Text('Item $index'),
                ),
              ),
            );
          },
        ),
      ),
      actions: <Widget>[
        ElevatedButton(
          onPressed: () {
            Navigator.of(context).pop(); // Close the dialog
          },
          child: Text('Close'),
        ),
      ],
    );
  }
}

Output: