Flutter insert ListView inside showGeneralDialog

Question

in Flutter i want to show simple ListView inside showGeneralDialog dialog. but i get this error:

RenderBox was not laid out: RenderFittedBox#d8a97 relayoutBoundary=up1
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1694 pos 12: 'hasSize'

showGeneralDialog(
    barrierLabel: "Label",
    barrierDismissible: true,
    barrierColor: Colors.black.withOpacity(0.5),
    transitionDuration: const Duration(milliseconds: 700),
    context: context,
    pageBuilder: (context, anim1, anim2) {
      return Align(
        alignment: Alignment.center,
        child: BuildPagesPopupMenu(),
      );
    },
),

class BuildPagesPopupMenu extends StatelessWidget {
  final List<MenuItems> _menuItems = [
    MenuItems(menuTitle: 'test1 ', icon: Icons.settings),
    MenuItems(menuTitle: 'test2 ', icon: Icons.list),
  ];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(
          child: ListView.separated(
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(_menuItems[index].menuTitle),
                leading: Icon(_menuItems[index].icon),
              );
            },
            separatorBuilder: (context, builder) {
              return const Divider();
            },
            itemCount: _menuItems.length,
          ),
        ),
      ],
    );
  }
}

class MenuItems {
  final String menuTitle;
  final IconData icon;

  MenuItems({@required this.menuTitle, @required this.icon});
}

`final List items = [MenuItems(menuTitle: 'test1 ', icon: Icons.settings), MenuItems(menuTitle: 'test2 ', icon: Icons.list),]; showGeneralDialog( barrierLabel: "Label", barrierDismissible: true, barrierColor: Colors.black.withOpacity(0.5), transitionDuration: const Duration(milliseconds: 700), context: context, pageBuilder: (context, anim1, anim2) => SimpleDialog( title: Text('menu'), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), children: items.map((e) => ListTile( title: Text(e.menuTitle), leading: Icon(e.icon), )).toList(), ), );` — pskink, Apr 01 '20 at 18:48

score 0 · Answer 1 · answered Apr 01 '20 at 18:22

To solve the error, you need to provide a size to the ListView inside the Expanded widget.

I suggest that you wrap your ListView inside a SizedBox and give it a height.

Example:

 Expanded(
      child: SizedBox(
       height: 200.0,
       child: ListView.separated(
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(_menuItems[index].menuTitle),
            leading: Icon(_menuItems[index].icon),
          );
        },
        separatorBuilder: (context, builder) {
          return const Divider();
        },
        itemCount: _menuItems.length,
      ),
     ), 
    ),

Can you try wrap your Column in the BuildPagesPopupMenu with a Scaffold? And put the column inside the body of the Scaffold — Amir, Apr 01 '20 at 18:33

Flutter insert ListView inside showGeneralDialog

1 Answers1