Flutter navigation, reopen page instead of pushing it again

Question

I'm new to flutter and I'm working on an App that have multiple screens.

I would like to know to stop flutter from creating multiple screens of the same route, for example I have Page 1 and Page 2, if I click on the button to navigate to Page 2 and clicked again on the same button the application will push a new screen of Page 2 and i will have it twice and if I click on the return button it will send me back to the first created Page 2

is there a way to create every page only once and then reopen it if it's already pushed to the stack ?

I'm using Navigator.push for all my navigation

On the button on Page 2 do you want to go back to Page 1? If so you should just use Navigator.of(context).pop(); and it will close Page 2 and go back to Page 1 without creating new views. — J. S., Dec 23 '19 at 15:34
the button should not be visible when on page2. think of navigation as a stack. if you push page2 again there will be two instances of page2 widget on the stack. — Golden Lion, May 26 '21 at 17:17

score 7 · Answer 1 · answered Mar 01 '21 at 17:46

7

These answers are not correct. PushReplacement will still create a new instance of the widget. That's very simple to identify if you have a scrollable list in RouteA and scroll it before navigating to a RouteB. When you pushReplacement(RouteA) , you'll see the scrolling position have changed to its initial state. That is because a new widget was instantiated, and that is not the behaviour you want.

You should use popUntil, as previously answered by JoaoSoares

answered Mar 01 '21 at 17:46

Maurício Fontana de Vargas

81
1
3

1

In case of a drawer, for example, you don't necessarily want to pop all pages until you return to the existing one. By doing so, you'd destroy all pages of your navigation stack for the sake of returning to only one. All sacrificing for one... ^^ I'd wish there would be a method to show a page if it exists... – Mackovich May 11 '21 at 16:03

score 5 · Answer 2 · answered Dec 23 '19 at 15:44

Using a simple logic here

If the new page is the same as the current page then use Navigator.push(context,route).
If the new page is the different then use Navigator.pushReplacement(context,route).

In case if you are using named routes then for

same page as current, use Navigator.pushNamed(context,name).
different page, use Navigator.pushReplacementNamed(context,name).

Complete code sample

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SO(),
    );
  }
}

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageOne(),
    );
  }
}

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 1'),
      ),
      backgroundColor: Colors.amber,
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                print('creating replacement page 1');
                Navigator.pushReplacement(context, MaterialPageRoute(builder: (BuildContext context) {
                  return PageOne();
                }));
              },
              child: Text('Go to page 1'),
            ),
            RaisedButton(
              onPressed: () {
                print('creating new page 2');
                Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) {
                  return PageTwo();
                }));
              },
              child: Text('Go to page 2'),
            ),
          ],
        ),
      ),
    );
  }
}

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page 2'),
      ),
      backgroundColor: Colors.brown,
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            RaisedButton(
              onPressed: () {
                print('creating new page 1');
                Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) => PageOne()));
              },
              child: Text('Go to page 1'),
            ),
            RaisedButton(
              onPressed: () {
                print('creating replacement page 2');
                Navigator.pushReplacement(context, MaterialPageRoute(builder: (BuildContext context) => PageTwo()));
              },
              child: Text('Go to page 2'),
            ),
          ],
        ),
      ),
    );
  }
}

if you are using replacement, it will remove back navigation address. — withoutOne, Mar 31 '22 at 12:05

score 4 · Answer 3 · answered Dec 23 '19 at 14:58

You should use Navigator.pushReplacement(). Here are the docs: https://api.flutter.dev/flutter/widgets/NavigatorState/pushReplacement.html

In summary, when you call pushReplacement, it pushes a new page but also disposes of the previous one. Now, when you press the back button, it should bring you back to page 1.

Flutter navigation, reopen page instead of pushing it again

3 Answers3

Linked