How to Remove all Routes from the Navigation Tree in Flutter?

What are routes?

In Flutter, Route is a widget used to navigate to a different screen.

The navigation system is one of the most important processes in any mobile app development journey. Also, its a trusted choice to hire Flutter developer to make your mobile app development journey successful.

The Route is used to navigate from one screen to another in Flutter.

For Example,

There is a screen that contains the image, and once the user taps on that image, the new screen will display details about that image.

Basically, there are two types of methods in routes :

1. Navigator.push Method

This method is used to Navigate to the second route.

You can check here how to navigate the new screen in flutter.

2. Navigator.pop Method

The navigator.pop() method is used to return to the first route.

Below we have mentioned the methods that remove all routes:

Method #1: pushNamedAndRemoveUntil

The first method is used when a developer builds an auth-like sign-in or sign-out application. For example, When a user logs out from an application and afterward if the user re-entered that application, they must have moved to the sign-in screen.

So in this scenario, this method will help remove all routes in the stack so that the user cannot go back to the previous routes after they successfully log out. We need to forcefully move the user to the login routes to the stack before showing any screen.

Navigator.of(context).pushNamedAndRemoveUntil('/login', (Route route) => false);

The above code indicates that routes always return false; this condition is used to remove all routes from the stack.

(Route route) => false.

Following these conditions will remove all the routes from the stack except the /login route we pushed.

Method #2: pushAndRemoveUntil

The second method is used when the user wants to remove all routes from the stack and add the new screen using

MaterialPageRoute(
Builder: (context) => LoginScreen()),

Here developers can put any screen instead of Login Screen LoginScreen().

Navigator.of(context).pushAndRemoveUntil(MaterialPageRoute(
builder: (context) => LoginScreen()), (Route route) => false);

Method 3: popUntil

Another alternative is popUntil()
If you do not use named routes, and we want the navigator to the first screen or First active, you can use the popUntil() method.

Navigator.of(context).popUntil((route) => route.isFirst);

Below, I mentioned the Example with full source code:

import 'package:flutter/material.dart';

void main() {
 runApp(const Nav2App());
}

class Nav2App extends StatelessWidget {
 const Nav2App({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     onGenerateRoute: (settings) {
       // Handle '/'
       if (settings.name == '/') {
         return MaterialPageRoute(builder: (context) => const HomeScreen());
       }

       // Handle '/details/:id'
       var uri = Uri.parse(settings.name!);
       if (uri.pathSegments.length == 2 &&
           uri.pathSegments.first == 'details') {
         var id = uri.pathSegments[1];
         return MaterialPageRoute(builder: (context) => DetailScreen(id: id));
       }

       return MaterialPageRoute(builder: (context) => const UnknownScreen());
     },
   );
 }
}

class HomeScreen extends StatelessWidget {
 const HomeScreen({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(),
     body: Center(
       child: TextButton(
         child: const Text('View Details'),
         onPressed: () {
           Navigator.pushNamed(
             context,
             '/details/1',
           );
         },
       ),
     ),
   );
 }
}

class DetailScreen extends StatelessWidget {
 final String id;

 const DetailScreen({
   Key? key,
   required this.id,
 }) : super(key: key);

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(),
     body: Center(
       child: Column(
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           Text('Viewing details for item $id'),
           TextButton(
             child: const Text('Pop !'),
             onPressed: () {
               Navigator.of(context).pushAndRemoveUntil(
                   MaterialPageRoute(builder: (context) => const HomeScreen()),
                   (Route route) => false);
             },
           ),
         ],
       ),
     ),
   );
 }
}

class UnknownScreen extends StatelessWidget {
 const UnknownScreen({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(),
     body: const Center(
       child: Text('Page not found 404!'),
     ),
   );
 }
}

Output:

Conclusion:

So, In this article we learned about How to remove all routes from the stack and also learned about how to navigate to a new screen and remove all screens.

Thank you for reading our article. Hope you enjoyed our article. Keep visiting Bosc Tech for more upcoming content.

Hire React Developer Today!