Flutter navigation, reopen page instead of pushing it again

问题

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

回答1:

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

回答2:

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.

来源：https://stackoverflow.com/questions/59457306/flutter-navigation-reopen-page-instead-of-pushing-it-again

标签

Flutter

mobile-application

flutter-navigation