Question 125992 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – Flutter: How to navigate to another page without losing the first background?

My question is about dart language, 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

Tags:

3

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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());
    Login or Signup to reply.
  3. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search