How to navigate to another page without losing the first background?

user_19082083 0
Viewed 45

These are my web pages:

Web page #1:

enter image description here

code:

 return BackdropFilter(
      filter: ImageFilter.blur(sigmaX: 2, sigmaY: 2),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(32.0),
            child: Container(...

    GestureDetector(
                                          onTap: () {
                                            showDialog(
                                                context: context,
                                                builder: (ctx) => SignUpNameEmailPassword());
                                          },

Web page #2:

enter image description here

Code:

Column(
                                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                                  children: [
                                    GestureDetector(
                                      onTap: () {
                                        showDialog(
                                            context: context,
                                            builder: (ctx) => WeSentYouAnEmail());
                                      },
                                      child: Container(
                                        child: Center(
                                          child: Icon(
                                            Icons.arrow_forward,
                                            size: 40,
                                            color: Color(0xff7E7E7E),
                                          ),
                                        ),
                                      ),
                                    ),
                                  ],
                                ),

Web page #3:

enter image description here

As you can see, each time I navigate to another page the background is darker, how to maintain the web page #1's background on each webpage?

Thank you in advance

flutter
3 Answers

Just set the second, third and so on showDialog calls with property barrierColor to Colors.transparent. Something like below:

showDialog(
    context: context,
    barrierColor: Colors.transparent,
    builder: (ctx) => SignUpNameEmailPassword());
user_28283410

The issue is that each dialog is getting stacked. Before you call a new showDialog do

Navigator.pop(context);

So you remove the previous pop up and add a new one.

Please note that you should be calling navigator.pop only if the dialog is displayed elseit will pop the main screen

user_171690370

It seems that you push each page what makes the background darker.

You can try to navigate bewtween your pages like this.

Route route = MaterialPageRoute(builder: (context) => NextPage());
Navigator.pushReplacement(context, route);

This will push and replace the last page of the stack.

user_195864650
Related