ListView inside Alert Dialog displays empty transparent window-CodePudding

Below is my Alertdialog:

 return AlertDialog(
          title: const Text('Choose Device'),
          content: ListView.builder(
            shrinkWrap: true,
            itemCount: listDevices.length,
            itemBuilder: (_, int index) => deviceList(listDevices[index]),
          ),
        );

Below is deviceList function:

Widget deviceList(String strDevice) => SizedBox(
    height: 150.0,
    child: Column(
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: <Widget>[
        Row(
          children: <Widget>[
            const Icon(Icons.toys),
            Padding(
              padding: const EdgeInsets.only(left: 8.0),
              child: Text(strDevice),
            ),
          ],
        ),
        const SizedBox(
          height: 20.0,
        ),
      ],
    ),
  );

Its not displaying Listview and am getting error as:

The following assertion was thrown during paint(): RenderBox was not laid out: RenderPhysicalShape#aedc0 relayoutBoundary=up2 'package:flutter/src/rendering/box.dart': Failed assertion: line 2001 pos 12: 'hasSize'

What might be the issue? Thanks.

CodePudding user response：

You can use like this:

  List<String> listDevices = <String>['iPhone 11', 'Samsung M22f', 'MacBook Pro', 'Xiaomi note 12 pro'];

I opened AlertDialog box when tap on ElevatedButton like this:

ElevatedButton(
          onPressed: () {
            showDialog(
              context: context,
              builder: (ctx) => AlertDialog(
                title: const Text("Alert Dialog Box"),
                content: SizedBox(
                  // height: 250,
                  width: 150,
                  child: ListView.builder(
                    shrinkWrap: true,
                    itemCount: listDevices.length,
                    itemBuilder: (_, int index) => deviceList(listDevices[index]),
                  ),
                ),
              ),
            );

            //onTap function define here
          },
          child: const Text('Send Message'),
        ),

I don't changes your deviceList widget

And i clearly show AlertDialogBox with ListView. I hope it's help you. Happy Coding :}

CodePudding user response：

Try to wrap ListView.builder in a SizedBox with a specific height and width.

AlertDialog(
              title: const Text('Choose Device'),
              content: SizedBox(
                height: 300,
                width: 300,
                child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: listDevices.length,
                  itemBuilder: (_, int index) =>
                      deviceList(listDevices[index]),
                ),
              ),
            ),

CodePudding user response：

Since you are using ListView.builder inside an AlertDialog widget, you must specify the AlertDialog width and height : -

return SizedBox(
  height: 800, // change the height according to your needs
  width: 300,// change the width according to your needs
  child: AlertDialog(
    title: const Text('Choose Device'),
    content: ListView.builder(
      shrinkWrap: true,
      itemCount: listDevices.length,
      itemBuilder: (_, int index) => deviceList(listDevices[index]),
    ),
  ),
);