Trending Articles       10 Flutter Listview Examples       Flutter Custom Button Example       Flutter Audio Recording       Flutter 2.0 Autocomplete TextField       Current Location Google Maps

How to show Listview inside Dialog in Flutter

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"),),
        )
      ],
    );
  }
}

 

Related Topics: How to add TextField Inside Alert Dialog in Flutter

 


1989 Views

Author: RRTutors