Home > Mobile >  How to clear some screens while doing redirection between source to destination screens in flutter?
How to clear some screens while doing redirection between source to destination screens in flutter?

Time:09-27

Screen A is a Login Page
Screen B is Homepage (Source Page)
Screen C
Screen D
Screen E Destination page

Redirect

Screen B to Screen C,
Screen C to Screen D
Screen D to Screen E

Conditions,

  • If user click back press or tap button it should redirect to previous screen without clearing its data from local memory.

  • After reahing screen E if user click on button. It should clear screen C,D,E and redirect to screen B.

    Navigator.push( context, MaterialPageRoute(builder: (context) => const Screen B()), );

CodePudding user response:

if you want to remove the route, you can try this:

Navigator.of(context).pushAndRemoveUntil(
    MaterialPageRoute(
       builder: (context) => const ScreenB()),
       (Route<dynamic> route) => false);

CodePudding user response:

Push the given route onto the navigator, and then remove all the previous routes until the predicate returns true.

The predicate may be applied to the same route more than once if Route.willHandlePopInternally is true.

To remove routes until a route with a certain name, use the RoutePredicate returned from ModalRoute.withName.

To remove all the routes below the pushed route, use a RoutePredicate that always returns false (e.g. (Route route) => false).

Example:

void _resetAndOpenPage() {
  navigator.pushAndRemoveUntil<void>(
    MaterialPageRoute<void>(builder: (BuildContext context) => const MyHomePage()),
    ModalRoute.withName('/'),
  );
}

CodePudding user response:

In such cases you have to use Named Routes. https://docs.flutter.dev/cookbook/navigation/named-routes Firstly, register the names of the routes in the MaterialApp Widget.

MaterialApp(
      title: 'Test App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: ScreenA.routeName,
      routes: {
        ScreenA.routeName: (context) => const ScreenA(),
        ScreenB.routeName: (context) => const ScreenB(),
        ScreenC.routeName: (context) => const ScreenC(),
        ScreenD.routeName: (context) => const ScreenD(),
        ScreenE.routeName: (context) => const ScreenE(),
      },
    );

A sample screen from Screen A to Screen D will be as follows:

Scaffold(
  appBar: AppBar(
    title: const Text("Screen A"),
  ),
  body: Center(
    child: Column(
      children: [
        const TextField(),
        ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, ScreenB.routeName);
            },
            child: const Text('Go to screen B')),
      ],
    ),
  ),
);

But, inside screen E use RoutePredicate as follows:

ElevatedButton(
    onPressed: () {
      Navigator.pushNamedAndRemoveUntil(context, ScreenB.routeName,
          (route) => route.settings.name == ScreenA.routeName);
    },
    child: const Text('Go to Screen B'))

This will delete all the routes in the stack until "(route) => route.settings.name == ScreenA.routeName" statement returns true, which is until stack finds named route with the name of ScreenA.

Hope it helps.

  • Related