Google nav bar in flutter not changing pages as intended

For my flutter project, I am using google_nav_bar. Every time I click on a button in the nav_bar I want to navigate to another page. I want to do this without making the nav bar my home page and loading other pages to the nav bar.

import 'package:flutter/material.dart';
import 'package:google_nav_bar/google_nav_bar.dart';
import 'package:space_flight_recorder/view/home.dart';
import '../view/about.dart';
import '../view/upcoming.dart';
import '../view/previous.dart';

class Nav_bar extends StatefulWidget {
  const Nav_bar({super.key});

  @override
  State<Nav_bar> createState() => _Nav_barState();
}

class _Nav_barState extends State<Nav_bar> {

  bool status = false;
  int index = 0;
  @override
  Widget build(BuildContext context) {
    return
      // body: _pages[_index],
     SingleChildScrollView(
       // scrollDirection: Axis.horizontal,
       child: GNav(
          // onTabChange: (index) {
          //   setState(() {
          //     _index = index;
          //   });
          // },
          curve: Curves.easeInOut,
          backgroundColor: Colors.black,
          color: Colors.white,
          activeColor: Colors.blue,
          tabBackgroundColor: Colors.transparent,
          gap: 3,
          hoverColor: Colors.grey,
          iconSize: 30,
          tabs:  [
            GButton(
              text: 'HOME',
              icon: Icons.home,
              onPressed:(){
                index=1;
              },
            ),
            GButton(
              text: 'PREVIOUS',
              icon: Icons.restart_alt,
              onPressed:(){
                index=2;
              },
            ),
            GButton(
              text: 'UPCOMING',
              icon: Icons.rocket_launch,
              onPressed:(){
                index=3;
              },
            ),

            GButton(
              text: 'ABOUT',
              icon: Icons.info,
              onPressed:(){
                index=4;
              },
            ),
          ],
         onTabChange: pagechange(),
        ),
     );
  }

  pagechange() {
    if (index==1)
      {
        Navigator.pushNamed(context, 'home');
      }
    if (index==2)
    {
      Navigator.pushNamed(context, 'previous');
    }
    if (index==3)
    {
      Navigator.pushNamed(context, 'upcoming');
    }
    if (index==4)
    {
      Navigator.pushNamed(context, 'info');
    }
  }
}

I have also set the bottom navbar in all of the pages that I navigate to as follows

bottomNavigationBar: Nav_bar(),

In this code, the page is not changing, and when I write the Navigator.pushedName function in the onPressed function itself, then page is changed but the animation at the bottom is absent, it just gets stuck at home. All I want is to change the page as we click the button and change the animation of the nav bar with it without making the bottom nav bar class as my page which in turns load all the other pages using setState() etc. I am using this dependency

google_nav_bar: ^5.0.6

You've forgot to call setState like

GButton(
    text: 'HOME',
    icon: Icons.home,
    onPressed:(){
      setState((){
        index=1;
      });
    },
  ),