How can my flutter app remember the page states, when I change the tabs using bottom navigation bar?

Question

I am using Flutter Modular to navigate between my tabs. I want to my pages remember the state (stay at the right scroll lposition) if I switch tabs with bottom navigation bar. But now it resets the state and create a new instance of the object.

I have tried it using static variables:

static const HomePage homepage = HomePage();
.
.
.
@override
final List<ModularRoute> routes = [
    ChildRoute('/home',
      child: (context, args) => MainPage(),
      transition: TransitionType.scale,
      guards: [AuthGuard(authModel: authModel, guardedRoute: '/login')],
      children: [
        ChildRoute('/',
          child: (_, __) => homepage,
          transition: TransitionType.fadeIn,
        ),
     ],
   )
];

And my home page is like that:

int _selectedPageIndex = 0;

  void _changePageIndex(int id) {
    if (id  != _selectedPageIndex) {
      if (id == 0) {
        Modular.to.navigate('/home/');
      } else if (id == 1) {
        Modular.to.navigate('/home/favorites');
      } else if (id == 2) {
        Modular.to.navigate('/home/new-listing');
      } else if (id == 3) {
        Modular.to.navigate('/home/messages');
      } else if (id == 4) {
        Modular.to.navigate('/home/profile');
      }
      setState(() {
        _selectedPageIndex = id;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
  return Scaffold(
      body: SafeArea(
        child: RouterOutlet(),
      ),
      bottomNavigationBar: Container(
          decoration: BoxDecoration(
            color: Theme.of(context).colorScheme.surface,
            boxShadow: [
              BoxShadow(
                blurRadius: 20,
                color: Colors.black.withOpacity(.1),
              )
            ],
          ),
          child: SafeArea(
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 8),
              child: GNav(
                rippleColor: Theme.of(context).colorScheme.onSurface.withOpacity(0.1),
                hoverColor: Theme.of(context).colorScheme.onSurface.withOpacity(0.1),
                gap: 6,
                activeColor: Theme.of(context).colorScheme.onSurface,
                iconSize: 20,
                padding: EdgeInsets.symmetric(horizontal: 10, vertical: 16),
                duration: Duration(milliseconds: 400),
                tabBackgroundColor: Theme.of(context).colorScheme.onSurface.withOpacity(0.1),
                color: Theme.of(context).colorScheme.onSurface.withOpacity(0.8),
                tabs: const [
                  GButton(
                    icon: LineIcons.home,
                    text: 'Home',
                  ),
                  GButton(
                    icon: LineIcons.heart,
                    text: 'Favorites',
                  ),
                  GButton(
                      icon: LineIcons.plus,
                      text: 'Create'
                  ),
                  GButton(
                    icon: LineIcons.commentsAlt,
                    text: 'Messages',
                  ),
                  GButton(
                    icon: LineIcons.user,
                    text: 'Profile',
                  ),
                ],
                selectedIndex: _selectedPageIndex,
                onTabChange: _changePageIndex
              ),
            )
          )
      )
    );
  }