Flutter How Can I Show Dialog on Another Page

Question

I want to show dialog when I press the button I want to be navigated to another page and then I want to show a dialog indicating that I have been navigated to that page.

So I try this code;

InkWell(
                          onTap: () async {
                            Navigator.pushAndRemoveUntil(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => BottomBarD()),
                                (route) => false);
                            Dialog(
                              child: Container(
                                child: Column(
                                  children: [
                                    Text(
                                      "Navigated to Another Page",
                                      style: TextStyle(
                                        fontFamily: "Quando",
                                        fontWeight: FontWeight.w500,
                                        fontSize: 15,
                                      ),
                                    ),
                                    TextButton(
                                      onPressed: () async {
                                        Navigator.of(context).pop();
                                      },
                                      child: Text(
                                        "Okey",
                                        style: TextStyle(
                                          fontFamily: "Quando",
                                          fontSize: 15,
                                        ),
                                      ),
                                    ),
                                  ],
                                ),
                              ),
                            );
                          },
                          child: Container(
                            decoration: BoxDecoration(
                              gradient: LinearGradient(
                                  colors: [Colors.orangeAccent, Colors.red],
                                  begin: Alignment.bottomRight,
                                  end: Alignment.centerLeft),
                              borderRadius: BorderRadius.only(
                                bottomLeft: Radius.circular(112.0),
                                topLeft: Radius.circular(112.0),
                                bottomRight: Radius.circular(112.0),
                                topRight: Radius.circular(112.0),
                              ),
                            ),
                            height: MediaQuery.of(context).size.height * 0.065,
                            width: MediaQuery.of(context).size.width * 0.80,
                            margin: EdgeInsets.only(
                              top: 30.0,
                              bottom: 10.0,
                            ),
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                Container(
                                  child: Text(
                                    "Navigate and ShowDialog Button",
                                    textAlign: TextAlign.center,
                                    style: TextStyle(
                                        color: Colors.white,
                                        fontSize: 17,
                                        fontFamily: "Quando"),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),

But when I press the okay button in the dialog, the okay button does not work and it gives a that error;

Unhandled Exception: Null check operator used on a null value

try my answer [here](https://stackoverflow.com/a/68507541/13997210) hope its help to you — Ravindra S. Patil, Sep 29 '21 at 13:10
Why don't you put the `Dialog` in your second page, `BottomBarD`, and display it based on a conditional field so that your `onTap` can have `builder: (context) => BottomBarD(showDialog: true)`? — PatrickMahomes, Sep 29 '21 at 13:16
I will try this solution thanks so much, I will let you know after I try. — Rkdio, Sep 29 '21 at 13:20
I can't show to Dialog like a widget, İts can shown only in any Function and functions can called only with button. — Rkdio, Sep 29 '21 at 18:22
In the solution you said, I have to press a button on the 2nd page and call the function again. — Rkdio, Sep 29 '21 at 18:25

score 1 · Answer 1 · answered Sep 29 '21 at 13:21

1

This worked fine on DartPad:

  void _incrementCounter() {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (c) => Scaffold(body: Text('new page'))
    ));
    showDialog(context: context, 
      builder: (c) => AlertDialog(content: Text('the dialog in it'),)
    );
  }

Notice that .push() returns a Future immediately. The dialog you show after that is shown on top of page 2, since we don't await for it.

answered Sep 29 '21 at 13:21

Gazihan Alankus

11,256
7
46
57

Can I do that with pushAndRemoveUntil because I don't want to have the option to go back when I press the button. – Rkdio Sep 29 '21 at 14:55
When I use pushAndRemoveUntil I cant press the Okey button in Dialog – Rkdio Sep 29 '21 at 17:50
How can I fix that. – Rkdio Sep 29 '21 at 17:50
hmm I think you would have to wait for the removes somehow. Can you try making this function async and adding an `await Future.delayed()` before showDialog with something like 100ms? – Gazihan Alankus Sep 29 '21 at 19:02
I added Future.delayed() but its not worked. When I use pushAndRemoveUntil and then when I press the Okey button in Dialog I take this error Unhandled Exception: Null check operator used on a null value – Rkdio Sep 29 '21 at 19:20
It may be unrelated. Try that dialog without pushAnd... – Gazihan Alankus Sep 29 '21 at 22:15
İts work without pushAndReomveUntil but I dont want to have the option to go back when I press the button. – Rkdio Sep 30 '21 at 11:53
you need to see what's being null checked – Gazihan Alankus Sep 30 '21 at 12:39

score 0 · Accepted Answer · edited Oct 01 '21 at 00:06

0

I put the Dialog in my second page BottomBarD() and I displayed it based on a conditional field every time the BottomBarD() loads.

edited Oct 01 '21 at 00:06

bad_coder

11,289
20
44
72

answered Sep 30 '21 at 12:21

Rkdio

153
2
13

Flutter How Can I Show Dialog on Another Page

2 Answers2