Open In App

Flutter - Display a GridView Within an AlertDialog Box

Last Updated : 23 Jul, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

AlertDialogs are useful Widgets in Flutter to attract the user's attention to a particular message that is shown by the Alert Dialogs. GridViews 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 a GridView within an Alert Dialog. A sample video is given below to get an idea of what we are going to do in this article.

Demo Video

Basic Syntax of a 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 Flutter Application

Create a new Flutter application using the command Prompt. To create a new app, write the following command and run it.

flutter create app_name

To know more about it refer this article: 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 setting 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 a Gridview will appear on the Screen. When the button is clicked, it calls the showGridViewDialog method, then the method calls the 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 
// Main screen that contains a button to show GridView inside an AlertDialog
class GridViewAlertDialogExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // AppBar widget at the top of the screen
      appBar: AppBar(
        backgroundColor: Colors.green, // Set app bar background color
        foregroundColor: Colors.white, // Set app bar text/icon color
        title: Text('GridView in AlertDialog Example'), // Title text
      ),
      // Body of the screen
      body: Center(
        // Center a button on the screen
        child: ElevatedButton(
          // Style the button with green background and white text
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.green,
            foregroundColor: Colors.white,
          ),
          onPressed: () {
            showGridViewDialog(context); // Call function to show dialog
          },
          child: Text('Show GridView Dialog'), // Button label
        ),
      ),
    );
  }
}

// Function to display an AlertDialog containing a GridView
void showGridViewDialog(BuildContext context) {
  showDialog(
    context: context, // Required to show the dialog in the right widget tree
    builder: (context) {
      return CustomGridViewDialog(); // Return custom dialog widget
    },
  );
}

// Custom widget that defines the GridView inside an AlertDialog
class CustomGridViewDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text('GridView Inside AlertDialog'), // Dialog title
      content: Container(
        width: double.maxFinite, // Make container as wide as possible
        // GridView to show items in a grid format
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, // 2 items per row
            childAspectRatio: 1.0, // Width-to-height ratio of each item
          ),
          itemCount: 6, // Number of items to show
          itemBuilder: (context, index) {
            return Card(
              color: Colors.green, // Card background color
              elevation: 3, // Adds shadow to create depth
              margin: EdgeInsets.all(8), // Space around each card
              child: InkWell(
                onTap: () {
                  // Print item index when tapped
                  print('Tapped on Item $index');
                },
                child: Center(
                  // Display item index text in the center
                  child: Text(
                    'Item $index',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
            );
          },
        ),
      ),
      // Dialog action buttons
      actions: <Widget>[
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.green, // Button background color
            foregroundColor: Colors.white, // Button text color
          ),
          onPressed: () {
            Navigator.of(context).pop(); // Close the dialog on press
          },
          child: Text('Close'), // Button label
        ),
      ],
    );
  }
}

Complete Source Code

main.dart:

Dart 
// Importing Flutter material package for UI components
import 'package:flutter/material.dart';

// Entry point of the application
void main() {
  runApp(MyApp()); // Runs the app and loads MyApp widget
}

// Root widget of the application
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Define the overall theme of the app
      theme: ThemeData(
        primarySwatch: Colors.green, // Set primary color to green
      ),
      debugShowCheckedModeBanner: false, // Hide the debug banner
      title: 'GridView in AlertDialog Example', // App title
      home: GridViewAlertDialogExample(), // Set home screen
    );
  }
}

// Main screen that contains a button to show GridView inside an AlertDialog
class GridViewAlertDialogExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // AppBar widget at the top of the screen
      appBar: AppBar(
        backgroundColor: Colors.green, // Set app bar background color
        foregroundColor: Colors.white, // Set app bar text/icon color
        title: Text('GridView in AlertDialog Example'), // Title text
      ),
      // Body of the screen
      body: Center(
        // Center a button on the screen
        child: ElevatedButton(
          // Style the button with green background and white text
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.green,
            foregroundColor: Colors.white,
          ),
          onPressed: () {
            showGridViewDialog(context); // Call function to show dialog
          },
          child: Text('Show GridView Dialog'), // Button label
        ),
      ),
    );
  }
}

// Function to display an AlertDialog containing a GridView
void showGridViewDialog(BuildContext context) {
  showDialog(
    context: context, // Required to show the dialog in the right widget tree
    builder: (context) {
      return CustomGridViewDialog(); // Return custom dialog widget
    },
  );
}

// Custom widget that defines the GridView inside an AlertDialog
class CustomGridViewDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text('GridView Inside AlertDialog'), // Dialog title
      content: Container(
        width: double.maxFinite, // Make container as wide as possible
        // GridView to show items in a grid format
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2, // 2 items per row
            childAspectRatio: 1.0, // Width-to-height ratio of each item
          ),
          itemCount: 6, // Number of items to show
          itemBuilder: (context, index) {
            return Card(
              color: Colors.green, // Card background color
              elevation: 3, // Adds shadow to create depth
              margin: EdgeInsets.all(8), // Space around each card
              child: InkWell(
                onTap: () {
                  // Print item index when tapped
                  print('Tapped on Item $index');
                },
                child: Center(
                  // Display item index text in the center
                  child: Text(
                    'Item $index',
                    style: TextStyle(color: Colors.white, fontSize: 20),
                  ),
                ),
              ),
            );
          },
        ),
      ),
      // Dialog action buttons
      actions: <Widget>[
        ElevatedButton(
          style: ElevatedButton.styleFrom(
            backgroundColor: Colors.green, // Button background color
            foregroundColor: Colors.white, // Button text color
          ),
          onPressed: () {
            Navigator.of(context).pop(); // Close the dialog on press
          },
          child: Text('Close'), // Button label
        ),
      ],
    );
  }
}

Output:



Next Article
Flutter | An introduction to the open source SDK by Google

C
chinmaya121221
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox