flutter-implementing-navigation-and-routing

Implementing Navigation and Routing in Flutter

Contents

• Core Concepts
• Implementing Imperative Navigation
• Implementing Declarative Navigation
• Implementing Nested Navigation
• Workflows
• Examples

Core Concepts

• Routes: In Flutter, screens and pages are referred to as routes. A route is simply a widget. This is equivalent to an Activity in Android or a ViewController in iOS.
• Navigator vs. Router:
  • Use Navigator (Imperative) for small applications without complex deep linking requirements. It manages a stack of Route objects.
  • Use Router (Declarative) for applications with advanced navigation, web URL synchronization, and specific deep linking requirements.
• Deep Linking: Allows an app to open directly to a specific location based on a URL. Supported on iOS, Android, and Web. Web requires no additional setup.
• Named Routes: Avoid using named routes (MaterialApp.routes and Navigator.pushNamed) for most applications. They have rigid deep linking behavior and do not support the browser forward button. Use a routing package like go_router instead.

Implementing Imperative Navigation

Use the Navigator widget to push and pop routes using platform-specific transition animations (MaterialPageRoute or CupertinoPageRoute).

Pushing and Popping

• Navigate to a new route using Navigator.push(context, route).
• Return to the previous route using Navigator.pop(context).
• Use Navigator.pushReplacement() to replace the current route, or Navigator.pushAndRemoveUntil() to clear the stack based on a condition.

Passing and Returning Data

• Sending Data: Pass data directly into the constructor of the destination widget. Alternatively, pass data via the settings: RouteSettings(arguments: data) parameter of the PageRoute and extract it using ModalRoute.of(context)!.settings.arguments.
• Returning Data: Pass the return value to the pop method: Navigator.pop(context, resultData). Await the result on the pushing side: final result = await Navigator.push(...).