pushing to same screen issue

[Ali-Maher-shopx]

Question:

auto_route pushing to the same screen issue

description: when I try to push to a nested screen in my home page it's pushed to the same AppLayoutPage, I tried to make the bottom nav bar using AutoTabsScaffold or AutoTabsRouter and it's not working and still push to the current route

code:

Main and App

final appRouter = AppRouter();
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerDelegate: appRouter.delegate(
        navigatorObservers: () => [
          CustomObserver(),
        ],
      ),
      routeInformationParser: appRouter.defaultRouteParser(),
    );
  }
}

class CustomObserver extends AutoRouteObserver {
  @override
  void didPush(Route route, Route? previousRoute) {
    print(
        'didPush route: ${route.settings.name} previousRoute: ${previousRoute?.settings.name}');
    super.didPush(route, previousRoute);
  }

  @override
  void didPop(Route route, Route? previousRoute) {
    print('didPop');
    super.didPop(route, previousRoute);
  }

  @override
  void didReplace({Route? newRoute, Route? oldRoute}) {
    print('didReplace');
    super.didReplace(newRoute: newRoute, oldRoute: oldRoute);
  }
}

AppLayoutPage

import 'package:auto_route/auto_route.dart';
import 'package:autoroutetest/app_router.dart';
import 'package:flutter/material.dart';

@RoutePage()
class AppLayoutPage extends StatelessWidget {
  const AppLayoutPage({super.key});

  @override
  Widget build(BuildContext context) {
    return AutoTabsRouter(
      routes: const [
        HomeRoute(),
        ProfileRoute(),
        SettingsRoute(),
      ],
      builder: (context, child) {
        final tabsRouter = context.tabsRouter;
        return Scaffold(
          body: child,
          bottomNavigationBar: BottomNavigationBar(
            onTap: tabsRouter.setActiveIndex,
            currentIndex: tabsRouter.activeIndex,
            items: const [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: 'Home',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: 'Profile',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.settings),
                label: 'Settings',
              ),
            ],
          ),
        );
      },
    );
  }
}

HomePage

import 'package:auto_route/auto_route.dart';
import 'package:autoroutetest/app_router.dart';
import 'package:flutter/material.dart';

@RoutePage()
class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: InkWell(
          onTap: () {
            context.router.push(const NewTestRoute());
          },
          child: const Text('Home Page'),
        ),
      ),
    );
  }
}

AppRouter

import 'package:auto_route/auto_route.dart';
import 'package:autoroutetest/app_layout.dart';
import 'package:autoroutetest/new_test.dart';

import 'home_page.dart';
import 'profile_page.dart';
import 'settings_page.dart';

part 'app_router.gr.dart';

@AutoRouterConfig(replaceInRouteName: 'Page,Route')
class AppRouter extends _$AppRouter {
  @override
  List<AutoRoute> get routes => [
        AutoRoute(
          page: AppLayoutRoute.page,
          initial: true,
          children: [
            AutoRoute(
              page: HomeRoute.page,
              children: [
                AutoRoute(page: NewTestRoute.page),
              ],
            ),
            AutoRoute(page: ProfileRoute.page),
            AutoRoute(page: SettingsRoute.page),
          ],
        ),
      ];
}

and when I print didPush:

Restarted application in 233ms.
flutter: didPush route: AppLayoutRoute previousRoute: null
flutter: print: click on context.router.push(NewTestRoute())
flutter: didPush route: AppLayoutRoute previousRoute: AppLayoutRoute

[Milad-Akarie]

To render child routes you need a nested AutoRouter Widget ( an outlet )
please read the docs more carefully https://pub.dev/packages/auto_route#nested-navigation