Question 77682 in Flutter Question posted in
The official Flutter documentation can be found here.

ListView inside Alert Dialog displays empty transparent window – Flutter

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.

Tags:

2

Answers


  1. 0

    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]),
                ),
              ),
            ),
    Login or Signup to reply.
  2. 0

    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 :}

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search