SimpleDialog not displaying in Flutter

Question

I'm developing an app using Flutter. I need to show a dialog box once a certain condition is fulfilled. When it's fulfilled, the dialog box is not shown, but the screen is dimmed as if the dialog box is being shown.

showEndGamePopUp() {
    showDialog<void>(
      context: context,
      builder: (_) {
        return Container(
          child: SimpleDialog(
            backgroundColor: Colors.black,
            elevation: 2.0,
            title: Text(
              "$playerTurn wins!",
              style: TextStyle(
                color: Colors.white,
                fontSize: 20.0,
                height: 1.5,
              ),
            ),
            children: <Widget>[
              SimpleDialogOption(
                  onPressed: () => Navigator.pop(context),
                  child: Text("Play again"),
              ),
              SimpleDialogOption(
                  onPressed: () => exit(0),
                  child: Text("Exit"),
              ),
            ],
          ),
        );
      },
    );
  }

And I get the following exception: RenderBox was not laid out: RenderCustomPaint#3d792 relayoutBoundary=up3 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UP.

Have you thought about limiting the Expanded widgets' dimensions? Refer to [this](https://stackoverflow.com/questions/55440315/flutter-another-exception-was-thrown-renderbox-was-not-laid-out-renderrepaintb). — tomerpacific, Aug 29 '19 at 09:09
@tomerpacific, that works. Turns out I was looking in the wrong place when I first saw that answer. Thanks! — magikarp, Aug 29 '19 at 09:36
For anyone who's looking, setting the container size did the trick for me. — magikarp, Aug 29 '19 at 09:40

score 1 · Answer 1 · answered Aug 29 '19 at 09:42

The Problem is you use Expanded

I fix your Code.Here it is.

showEndGamePopUp() {
    showDialog<void>(
      context: context,
      builder: (_) {
        return Container(
          child: SimpleDialog(
            backgroundColor: Colors.red,
            elevation: 2.0,
            title: Text(
              "wins!",
              style: TextStyle(
                color: Colors.white,
                fontSize: 20.0,
                height: 1.5,
              ),
            ),
            children: <Widget>[
              Row(children: <Widget>[
                Expanded(
                    child: SimpleDialogOption(
                  onPressed: () => Navigator.pop(context),
                  child: Text("Play again"),
                )),
              ]),
              Row(
                children: <Widget>[
                  Expanded(
                    child: SimpleDialogOption(
                      onPressed: () => print(0),
                      child: Text("Exit"),
                    ),
                  )
                ],
              ),
            ],
          ),
        );
      },
    );
  }

Just use Row wrap your Expanded.

If you like, you can use Column wrap Expanded.

Expanded must be placed directly inside flex widget.

Amit Prajapati · Answer 2 · 2019-08-29T09:50:09.310

    showEndGamePopUp(BuildContext context) {
        showDialog<void>(
        context: context,
        builder: (_) {
            return Container(
            child: SimpleDialog(
                backgroundColor: Colors.black,
                elevation: 2.0,
                title: Text(
                "wins!",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 20.0,
                    height: 1.5,
                ),
                ),

                children: <Widget>[
                new FlatButton(
                    onPressed: () => Navigator.of(context).pop(false),
                    child: new Text("Play again",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 20.0,
                            height: 1.5,
                        ))),
                new FlatButton(
                    onPressed: () {
                        Navigator.of(context).pop(true);
                    },
                    child: new Text("Exit",
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 20.0,
                            height: 1.5,
                        )))
                ],
            ),
            );
        },
        );
    }

SimpleDialog not displaying in Flutter

2 Answers2