What are the ways to navigate between pages in Flutter applications?

There are several main approaches to navigation:

1. Navigator (default routes): The simplest method, using a stack of pages. Navigator.push() adds a new page on top of the current one, and Navigator.pop() removes the top page.

   // Transition to a new screen
   Navigator.push(
     context,
     MaterialPageRoute(builder: (context) => SecondScreen()),
   );
   

   // Return to the previous screen
   Navigator.pop(context);
   

2. Named Routes: Allows using string identifiers for pages, which is convenient for centralized route management.

   // Defining routes in MaterialApp
   MaterialApp(
     initialRoute: '/',
     routes: {
       '/': (context) => HomeScreen(),
       '/second': (context) => SecondScreen(),
     },
   );
   

   // Navigating by named route
   Navigator.pushNamed(context, '/second');
   

3. Navigation packages: Third-party solutions that provide more flexible and powerful navigation management, handling deep links, tab navigation, and more complex scenarios. Examples include go_router and auto_route.

   • go_router: A modern package integrating with Flutter 2.0+ Router API. Supports declarative navigation and URL handling.

     // Example of defining routes with go_router
     final GoRouter _router = GoRouter(
       routes: [
         GoRoute(
           path: '/',
           builder: (context, state) => HomeScreen(),
         ),
         GoRoute(
           path: '/details/:item',
           builder: (context, state) => DetailsScreen(state.pathParameters['item']!),
         ),
       ],
     );
     

     // Navigating with go_router
     context.go('/details/123');
     

   • auto_route: Code generator for routes based on annotations. Simplifies defining complex navigation graphs and passing arguments.

     // Example annotation for auto_route
     @RoutePage()
     class DetailsScreen extends StatelessWidget {
       final String itemId;
       const DetailsScreen({@pathParam required this.itemId});
       // ...
     }
     

     // Navigating with auto_route (generated code)
     AutoRouter.of(context).push(DetailsRoute(itemId: '123'));
     

The choice of method depends on the application's complexity and required functionality. For simple apps, Navigator is sufficient; for medium and large projects with complex navigation and deep links, it is recommended to use third-party packages like go_router or auto_route.