Изучение

Module, вкладки и вложенная навигация

Функциональные модули, размещение в приложении, независимые Navigator Scope и сохранение стека каждой вкладки.

v1.1.0Средний уровень

Первоисточник: doc/nested_navigation.md ↗

Module, вкладки и вложенная навигация

Module определяет Route функциональности. Mount размещает Module в конкретном приложении. Scope владеет одним стеком Navigator.

Функциональность экспортирует Module

dart

NavigationModule createCatalogModule() => NavigationModule(
  id: const NavigationModuleId('catalog'),
  routes: <NavigationRouteDefinitionBase>[catalogRoute, productRoute],
);

Module не знает, будет ли URL начинаться с /catalog или /shop и в какой вкладке он появится.

Приложение задаёт Mount

dart

NavigationMount(
  id: const NavigationMountId('customer-catalog'),
  moduleId: const NavigationModuleId('catalog'),
  scopeId: const NavigationScopeId('catalog-tab'),
  pathPrefix: '/catalog',
)

Отдельный Scope для каждой вкладки

Catalog и Profile должны быть дочерними Scope одного Shell. Отрисуйте выбранную ветвь:

dart

const NavigationActiveOutlet(parentScopeId: NavigationScopeId('shell'))

Переключите вкладку без уничтожения стека:

dart

navigation.activateBranch(const NavigationScopeId('profile-tab'));

Если Catalog содержит [Catalog, Product], переход в Profile и обратно вернёт пользователя на Product. resetBranch вызывайте только для намеренной очистки, например после выхода из аккаунта.

Полное приложение с NavigationBar находится в руководстве «Модульные вкладки».