Какие существуют способы навигации между страницами в приложениях на Flutter?

Существует несколько основных подходов к навигации:

1. Navigator (роуты по умолчанию): Простейший способ, использующий стек страниц. Navigator.push() добавляет новую страницу поверх текущей, а Navigator.pop() удаляет верхнюю страницу.

   // Переход к новому экрану
   Navigator.push(
     context,
     MaterialPageRoute(builder: (context) => SecondScreen()),
   );
   

   // Возврат к предыдущему экрану
   Navigator.pop(context);
   

2. Именованные роуты (Named Routes): Позволяет использовать строковые идентификаторы для страниц, что удобно для централизованного управления роутами.

   // Определение роутов в MaterialApp
   MaterialApp(
     initialRoute: '/',
     routes: {
       '/': (context) => HomeScreen(),
       '/second': (context) => SecondScreen(),
     },
   );
   

   // Переход по именованному роуту
   Navigator.pushNamed(context, '/second');
   

3. Пакеты для навигации: Сторонние решения, предоставляющие более гибкое и мощное управление навигацией, обработку глубоких (deep) ссылок, навигацию между вкладками и более сложные сценарии. Примеры включают go_router и auto_route.

   • go_router: Современный пакет, интегрирующийся с Router API во Flutter 2.0+. Поддерживает декларативную навигацию и работу с URL.

     // Пример определения роутов с go_router
     final GoRouter _router = GoRouter(
       routes: [
         GoRoute(
           path: '/',
           builder: (context, state) => HomeScreen(),
         ),
         GoRoute(
           path: '/details/:item',
           builder: (context, state) => DetailsScreen(state.pathParameters['item']!),
         ),
       ],
     );
     

     // Переход с go_router
     context.go('/details/123');
     

   • auto_route: Генератор кода для роутов на основе аннотаций. Упрощает определение сложных навигационных графов и передачу аргументов.

     // Пример аннотации для роута auto_route
     @RoutePage()
     class DetailsScreen extends StatelessWidget {
       final String itemId;
       const DetailsScreen({@pathParam required this.itemId});
       // ...
     }
     

     // Переход c auto_route (сгенерированный код)
     AutoRouter.of(context).push(DetailsRoute(itemId: '123'));
     

Выбор способа зависит от сложности приложения и требуемой функциональности. Для простых приложений достаточно Navigator, для средних и больших проектов с комплексной навигацией и глубокими ссылками рекомендуется использовать сторонние пакеты, такие как go_router или auto_route.