magikarp
magikarp

Reputation: 470

SimpleDialog not displaying in Flutter

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.

Upvotes: 0

Views: 709

Answers (2)

Amit Prajapati
Amit Prajapati

Reputation: 14305

    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,
                        )))
                ],
            ),
            );
        },
        );
    }

enter image description here

Upvotes: 0

mafanwei
mafanwei

Reputation: 61

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.

Upvotes: 1

Related Questions