Scrollable Alertdialog Flutter

Question

I am struggling to make the alert dialogue box scrollable in Flutter. I have tried a few methods and so far this is the one that is working best:

Widget _buildPopupDialog(BuildContext context) {
  List<IconData> _iconsTable = [
      Icons.build,
      Icons.format_paint,
      Icons.assignment,
      Icons.group_work,
      Icons.home,
      Icons.feedback,
      ...
    ];

  return new AlertDialog(
    title: const Text('Popup example'),
    content: Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.stretch,
    children: <Widget>[
      SingleChildScrollView(
        child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
         children: <Widget>[
           new Column(
                children: new List.generate(26, (int index) {
                  return new Positioned(
                    child: new TableButtons(
                        iconData: _iconsTable[index]),
                  );
               }),
           ),
         ],
       ),
     ),
  ],
),

Currently, the icons are showing up but it is not scrolling. The error message I am receiving is: "A RenderFlex overflowed by 170 pixels on the bottom." I think I have to use ListView but I am not sure where to add it as it is causing errors. Any help would be appreciated!

Does this answer your question? [Flutter - How to make a column screen scrollable](https://stackoverflow.com/questions/52053850/flutter-how-to-make-a-column-screen-scrollable) — BabC, Jan 06 '21 at 10:59
@BabC not really, I have looked at that previously and struggled to make it work. — ajnabz, Jan 06 '21 at 11:05

score 1 · Accepted Answer · answered Jan 06 '21 at 11:09

You have to many Column containing only 1 child, so you must clean up a bit your code :

Widget _buildPopupDialog(BuildContext context) {
  List<IconData> _iconsTable = [
      Icons.build,
      Icons.format_paint,
      Icons.assignment,
      Icons.group_work,
      Icons.home,
      Icons.feedback,
      ...
    ];

  return new AlertDialog(
    title: const Text('Popup example'),
    content: SingleChildScrollView(
        child: new Column(
          children: new List.generate(26, (int index) {
            return new Positioned(
              child: new TableButtons(
                iconData: _iconsTable[index]),
                );
            }),
          ),
),

Shanto · Answer 2 · 2021-01-06T11:18:44.380

1

I think you have used unwanted Column() widget.

Try this.

return AlertDialog(
  title: const Text('Popup example'),
  content: SingleChildScrollView(
    child: new Column(
      children: new List.generate(50, (int index) {
        return new Positioned(
          child: Icon(
            Icons.camera
          ),
        );
      }),
    ),
  ),
);

edited Jan 06 '21 at 11:18

answered Jan 06 '21 at 11:10

Shanto

609
4
8

Hi thank you for your help, however, when I use this, it throws this error: "A build function returned null." – ajnabz Jan 06 '21 at 11:14
@ajnabz try adding a return statement in front of the AlertDialog – Mukul Jan 06 '21 at 11:17

Scrollable Alertdialog Flutter

2 Answers2