Вложенная навигация с Go_Router
Давайте создадим боковую панель с Flutter Web и go_router 🤔

Вместо того, чтобы напрямую добавлять все маршруты (GoRoute), мы обернём их в поднавигацию 📦

Мы обернём все подмаршруты в StatefulShellRoute, чтобы управлять состоянием поднавигации 🔄

Для каждого подмаршрута у нас будет StatefulShellBranch, который может содержать несколько маршрутов 🌐

Каждый элемент будет иметь свой собственный стек навигации 📚

import 'package:go_router/go_router.dart'; // Импорт библиотеки go_router

GoRouter generateRouter() {
  return GoRouter(
    routes: [
      // Страница без боковой панели
      GoRoute(
        name: 'signin',
        path: '/signin',
        builder: (context, state) => const SignInPage(),
      ),
      // Страница с боковой панелью
      StatefulShellRoute(
        parentNavigatorKey: navigatorKey, // Ключ навигатора родительского маршрута
        // Боковая панель будет отображаться слева
        builder: (context, state, navigationShell) => Row(
          children: [
            SideBar(state: state), // Боковая панель
            Expanded(child: navigationShell), // Содержимое навигации
          ],
        ),
        // builder будет вызван, когда маршрут активируется
        // navigationShell - виджет, который отображает содержимое маршрута
        // Он будет показывать текущую последнюю страницу стека навигации для каждой ветки
        navigatorContainerBuilder: (
          BuildContext context,
          StatefulNavigationShell navigationShell,
          List<Widget> children,
        ) {
          if (children.isEmpty) {
            return SizedBox(); // Пустой контейнер, если нет дочерних элементов
          }
          return Scaffold(
            body: children[navigationShell.currentIndex], // Отображение текущего дочернего элемента
          );
        },
        branches: [
          StatefulShellBranch(
            routes: [
              GoRoute(
                name: 'users',
                path: '/users',
                builder: (context, state) => const UsersPage(),
              ),
              GoRoute(
                name: 'user profile',
                path: '/users/:userId',
                builder: (context, state) => const UserProfilePage(),
              ),
            ],
          ),
          StatefulShellBranch(
            routes: [
              GoRoute(
                name: 'notifications',
                path: '/notifications',
                builder: (context, state) => const NotificationsPage(),
              ),
            ],
          ),
        ],
      ),
    ],
  );
}

Оцените новую рубрику 👍👏! Все подобные новости можно найти по хэштегу #FlutterPulseTips. Не забудьте подписаться и следить за новыми советами 🔔

#flutter #dart #flutterpulse #FlutterPulseTips #MobileDevelopment #FlutterTips #GoRouter #NestedNavigation #FlutterWeb