How to show Listview inside Dialog in Flutter

Published November 30, 2020

Hello Guys, In this post, we will create a Flutter Application where Display Listview inside Dialog.

Let's get started

Step 1: Create a Flutter application

step 2: Write Login to display Dialog on Button click

AlertDialog(
  title: Container(child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Text('Pick Item',style: TextStyle(color: Colors.white),),
  ),color: Colors.blueAccent,),
  content: setupAlertDialoadContainer(context),
);

The above logic will create a dialog and show on the screen.

We are passing the list of items inside listview to the dialog

Widget setupAlertDialoadContainer(context) {
  return Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      Container(
        color: Colors.grey,
        height: 300.0, // Change as per your requirement
        width: 300.0, // Change as per your requirement
        child: ListView.builder(

          shrinkWrap: true,
          itemCount: 15,
          itemBuilder: (BuildContext context, int index) {
            return ListTile(
              title: Card(child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('List Item $index'),
              )),
            );
          },
        ),
      ),
      Align(
        alignment: Alignment.bottomRight,
        child: FlatButton(

          onPressed: (){
          Navigator.pop(context);
        },child: Text("Cancel"),),
      )
    ],
  );
}

Step 3: Run application

Flutter Display Listview inside Alert Dialog

Complete code:

import 'package:flutter/material.dart';


class ListViewDialog extends StatelessWidget{
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(title: Text("Listview inside Dialog"),),
      body: Container(
        height: double.infinity,
        child: Center(
          child: RaisedButton(onPressed: (){

            showDialog(
                context: context,
                builder: (BuildContext context) {
                  return AlertDialog(
                    title: Container(child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Text('Pick Item',style: TextStyle(color: Colors.white),),
                    ),color: Colors.blueAccent,),
                    content: setupAlertDialoadContainer(context),
                  );
                }
            );

          },
          child: Text("SHow Dialog with Listview"),),
        ),
      ),
    );
  }


  Widget setupAlertDialoadContainer(context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        Container(
          color: Colors.grey,
          height: 300.0, // Change as per your requirement
          width: 300.0, // Change as per your requirement
          child: ListView.builder(

            shrinkWrap: true,
            itemCount: 15,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(
                title: Card(child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('List Item $index'),
                )),
              );
            },
          ),
        ),
        Align(
          alignment: Alignment.bottomRight,
          child: FlatButton(

            onPressed: (){
            Navigator.pop(context);
          },child: Text("Cancel"),),
        )
      ],
    );
  }
}

Article Contributed By :

12461 Views