Navigator Extension in Flutter

In Flutter, navigating between screens is managed by the Navigator class. Using a custom extension for Navigator can streamline navigation calls, reducing repetitive code and enhancing readability.

Structure of an Extension in Dart

Here’s the general syntax for creating an extension in Dart:

• extension keyword: Declares that we’re defining an extension.
• Name: A unique name for the extension.
• on keyword: Specifies the type the extension applies to (e.g. BuildContext).

Example structure:

extension ExtensionName on TargetType {
  //Your extension implementation
}

Key Navigator Methods Simplified

This article focuses on four main navigation methods, showing how they can be wrapped in an extension to make calls simpler and more readable.

1. Navigator.of(context).push(): Navigates to a new screen.
2. Navigator.of(context).pushAndReplace(): Navigates to a new screen and removes the previous screen.
3. Navigator.of(context).pushAndRemoveUntil(): Navigates to a new screen and removes all previous screens.
4. Navigator.of(context).pop(): Returns to the previous screen.

Without extensions, navigation in Flutter can look like this:

///Navigation using the push method
Navigator.of(context).push(
  MaterialPageRoute(
     builder: (context) => ScreenToNavigate(),
   ),
 );

///Navigation using the pushAndReplace method
Navigator.of(context).pushAndReplace(
  MaterialPageRoute(
     builder: (context) => ScreenToNavigate(),
   ),
 );

///Navigation using the pushAndRemoveUntil method
Navigator.of(context).pushAndRemoveUntil(
  MaterialPageRoute(
     builder: (context) => ScreenToNavigate(),
   ),
   (route) => false,
 );

///Navigation to previous screen using pop method
Navigator.of(context).pop()

Implementation of the Navigator Extension

Here’s the custom extension that wraps the Navigator methods in concise functions:

extension NavigationExtention on BuildContext {
  ///Declaring a get variable for Navigator 
  ///To avoid later on in each method to call the Navigator.of(this)
  
  get navigator => Navigator.of(this);

  popNavigation() {
    if (navigator.canPop()) {
      navigator.pop();
    }
  }

 pushNavigation({required Widget screenToNavigate}) {
    navigator.push(
      MaterialPageRoute(
        builder: (context) => screenToNavigate,
      ),
    );
  }

  pushAndReplaceNavigation({required Widget screenToNavigate}) {
   navigator.pushAndReplace(
      MaterialPageRoute(
        builder: (context) => screenToNavigate,
      ),
    );  }

  pushAndRemoveUntilNavigation({required Widget screenToNavigate}) {
   navigator.pushAndRemoveUntil(
      MaterialPageRoute(
        builder: (context) => screenToNavigate,
      ),
          (route) => false,
    );
  }
}

Explanation:

• navigator Getter: Declares a getter that calls Navigator.of(this), allowing us to use navigator instead of repeating Navigator.of(this) in every method. Keep in mind that we are using the keyword this because our extention type is the BuildContext
• popNavigation: Checks if there’s a screen to pop back to and, if so, pops it.
• pushNavigation: Simplifies push by wrapping it in a method that only requires the destination widget.
• pushAndReplaceNavigation: Wraps pushAndReplace, making it more intuitive to replace screens.
• pushAndRemoveUntilNavigation: Allows for clearing the navigation stack before navigating.

Using the Extension

With this extension, you can navigate between screens in a cleaner way:

///Simple push Navigation
context.pushNavigation(
  screenToNavigate: ScreenToNavigate()
 );

///Push and replace Navigation
context.pushAndReplaceNavigation(
  screenToNavigate: ScreenToNavigate()
 );

///Push and remove until Navigation
context.pushAndRemoveUntilNavigation(
  screenToNavigate: ScreenToNavigate()
 );

///Pop navigation to go back to previous screen
context.popNavigation();

Benefits of Using Extensions

• Cleaner Code: Reduces repetitive Navigator.of(context) calls.
• Better Readability: Navigation calls are shorter and more descriptive.
• Reusability: The extension is available throughout the project, making navigation calls consistent.

Want to see this extension in action? Checkout my open-source project, Pokedex-Flutter on Github, where I’ve used it to streamline navigation!

Thanks for reading! If you have questions or suggestions, feel free to leave a comment!