Полное руководство по управлению навигацией во Flutter с помощью пакета go_router: часть 1

Привет, Хабр! Меня зовут Юрий Петров, я автор ютуб-канала «Мобильный разработчик» и Flutter Team Lead в Friflex. Мы разрабатываем мобильные приложения для бизнеса и специализируемся на Flutter. 

В этом руководстве я хочу рассказать про пакет go_router. Он помогает управлять навигацией во Flutter. Команда разработки Flutter поддерживает данный пакет. Это позволяет надеяться, что в дальнейшем пакет продолжит развиваться.

Рассказывать буду на примере простого проекта — Todo (заметки). Я понимаю, что таких проектов на Хабре очень много. Но, по-моему, лучшего примера не найти.

Создаем проект и подключаем библиотеку

Немного подумав, я решил, что для нашего проекта необходимо как минимум шесть экранов.

1. Экран аутентификации пользователя AuthScreen. Будем использовать фейковую аутентификацию.

2. Экран со списком заметок — NotesScreen.

3. Экран с детальной информацией заметок — DetailNoteScreen.

4. Экран с любимыми заметками — FavoriteNotesScreen.

5. Экран для создания заметок — CreateNoteScreen.

6. Экран для управления профилем — ProfileScreen.

7. Экран для размещения рутового экрана с нижней навигационной панелью — RootScreen.

Для удобства создаем четыре папки в папке features. В каждой из них — экраны. В каждом файле создаем одноименный StatelessWidget.

Реализация нижней навигационной панели — BottomNavigationBar

Создаем папку routing, в которой будем хранить карту маршрутов. Для создания нижней навигационной панели будем использовать маршрут StatefulShellRoute. Этот маршрут отображает пользовательский интерфейс с отдельными навигаторами для всех его под маршрутов. Он работает как ShellRoute, но с одним исключением. Он создает отдельные навигаторы для каждой из своих вложенных ветвей, то есть, параллельных деревьев навигации.

С StatefulShellRoute мы можем разрабатывать приложения с сохранением состояния вложенной навигации. Это удобно, например, при создании интерфейса с BottomNavigationBar, где для каждой вкладки сохраняется свое состояние навигации.

Чтобы создать StatefulShellRoute, указываем список элементов StatefulShellBranch. Каждый из них представляет отдельную ветку маршрута с сохранением состояния. 

StatefulShellBranch предоставляет корневые маршруты и ключ навигатора (GlobalKey) для ветки, а также начальное расположение. Как и в случае с ShellRoute, при создании StatefulShellRoute нужно предоставить либо builder, либо pageBuilder. 

Эти конструкторы отличаются тем, что они принимают параметр StatefulNavigationShell вместо дочернего виджета. StatefulNavigationShell можно использовать, чтобы получить доступ к информации о состоянии маршрута или переключить активную ветку. То есть, для восстановления стека навигации другой ветки. Это делается с помощью метода StatefulNavigationShell.goBranch.

final router = GoRouter(   initialLocation: '/notes',   routes: [     // BottomNavigationBar     StatefulShellRoute.indexedStack(       builder: (context, state, navigationShell) =>           RootScreen(navigationShell: navigationShell),       branches: [         StatefulShellBranch(           routes: [             GoRoute(               path: '/notes',               builder: (context, state) => const NotesScreen(),             ),           ],         ),         StatefulShellBranch(           routes: [             GoRoute(               path: '/favorites',               builder: (context, state) => const FavoritesScreen(),             ),           ],         ),         StatefulShellBranch(           routes: [             GoRoute(               path: '/profile',               builder: (context, state) => const ProfileScreen(),             ),           ],         ),       ],     ),   ], );

Объявляем глобальный router. Для удобства будем применять StatefulShellRoute с конструктором indexedStack. В параметре builder указываем RootScreen и передаем в него navigationShell. А в параметре branches — StatefulShellBranch с нужными маршрутами.

Теперь создадим навигационную панель на экране RootScreen. Для этого используем полученный navigationShell. Из него получаем текущий индекс и маршрут, который указан в ветви маршрута.

class RootScreen extends StatelessWidget {   const RootScreen({super.key, required this.navigationShell});    /// Контейнер для навигационного бара.   final StatefulNavigationShell navigationShell;    @override   Widget build(BuildContext context) {     return Scaffold(       body: navigationShell,       bottomNavigationBar: BottomNavigationBar(         /// Лист элементов для нижнего навигационного бара.         items: _buildBottomNavBarItems,         /// Текущий индекс нижнего навигационного бара.         currentIndex: navigationShell.currentIndex,         /// Обработчик нажатия на элемент нижнего навигационного бара.         onTap: (index) => navigationShell.goBranch(           index,           initialLocation: index == navigationShell.currentIndex,         ),       ),     );   }    // Возвращает лист элементов для нижнего навигационного бара.   List<BottomNavigationBarItem> get _buildBottomNavBarItems => [         const BottomNavigationBarItem(           icon: Icon(Icons.note),           label: 'Заметки',         ),         const BottomNavigationBarItem(           icon: Icon(Icons.favorite),           label: 'Любимые',         ),         const BottomNavigationBarItem(           icon: Icon(Icons.person),           label: 'Профиль',         ),        ]; }

Дальше нужно добавить в main.dart инициализацию роутера:

void main() {   runApp(const AppTodo()); }  class AppTodo extends StatelessWidget {   const AppTodo({super.key});    @override   Widget build(BuildContext context) {     return MaterialApp.router(       routerConfig: router,     );   } }

Инициализируем роутер для приложения. У него есть доступ к контексту и механизм поиска нужного маршрута, поэтому дальше обращаться к методам роутера будем через context.

Создаем MaterialApp. Используем в нем go_router вместо Navigator.

Обратите внимание, что здесь мы не передаем корневой виджет. Теперь всей навигацией управляет go_router. При запуске приложения вы увидите корневой маршрут с вложенной навигацией.

Отлично! Нам осталось создать навигацию детальной информации о заметке.

Реализация маршрута детальной информации

Для этого в экране NotesScreen создадим моковый список заметок и нарисуем их. По клику мы переходим на экран с детальной информацией о заметке.

Обратите внимание! Переходя на этот экран, мы открываем маршрут, который находится внутри одной ветки маршрутов.

/// Моковый список заметок const _notes = [   'Note 1',   'Note 2',   'Note 3',   'Note 4',   'Note 5',   'Note 6', ];  class NotesScreen extends StatelessWidget {   const NotesScreen({super.key});    @override   Widget build(BuildContext context) {     return Center(       child: ListView.separated(           itemBuilder: (context, index) {             return ListTile(               title: Text(_notes[index]),               onTap: () {                 // При клике на заметку переходим на экран                 // с детальной информацией                  context.go('/notes/detail');               },             );           },           separatorBuilder: (context, index) {             return const Divider();           },           itemCount: _notes.length),     );   } }

Осталось добавить этот маршрут в карту маршрутов ветки маршрута /notes.

  StatefulShellBranch(           routes: [             GoRoute(                 path: '/notes',                 builder: (context, state) => const NotesScreen(),                 routes: [                   GoRoute(                     path: 'detail',                     builder: (context, state) => const DetailScreen(),                   ),                 ]),           ],         ),

Теперь файл app_routing.dart выглядит так:

final router = GoRouter(   initialLocation: '/notes',   routes: [     // BottomNavigationBar     StatefulShellRoute.indexedStack(       builder: (context, state, navigationShell) =>           RootScreen(navigationShell: navigationShell),       branches: [         StatefulShellBranch(           routes: [             GoRoute(                 path: '/notes',                 builder: (context, state) => const NotesScreen(),                 routes: [                   GoRoute(                     path: 'detail',                     builder: (context, state) => const DetailScreen(),                   ),                 ]),           ],         ),         StatefulShellBranch(           routes: [             GoRoute(               path: '/favorites',               builder: (context, state) => const FavoritesScreen(),             ),           ],         ),         StatefulShellBranch(           routes: [             GoRoute(               path: '/profile',               builder: (context, state) => const ProfileScreen(),             ),           ],         ),       ],     ),   ], );

Запускаем приложение и получаем такой результат:

В этой статье мы начали изучать библиотеки go_router. Создали нижнюю навигационную панель и научились работать с вложенной навигацией. В следующей части разберем, как использовать редирект, проверять авторизацию, анимировать переходы.

Пример из статьи можно посмотреть по ссылке.

Документация доступна на сайте.