custome bottom navigation bar with gorouter and cubit pattern doesnt work

Question

i have written a customer bottom navigation bar that has two destinations but nothing happen when i tap on another destination ;

this is my bottomnavbar widget :

class NavigationBar extends StatelessWidget {
  ///
  final int selectedIndex;

  final List<NavigationBarDestination> destinations;

  final void Function(int selectedIndex) onDestnationChange;

  const NavigationBar({
    super.key,
    required this.destinations,
    required this.selectedIndex,
    required this.onDestnationChange,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 65,
      padding: const EdgeInsets.symmetric(vertical: 5),
      decoration: BoxDecoration(
        color: ui_kit.Theme.secoundary,
        border: Border.all(
          style: BorderStyle.solid,
          color: ui_kit.Theme.outline,
          width: 2,
        ),
        borderRadius: const BorderRadius.all(
           Radius.circular(ui_kit.Theme.radius),
        ),
        boxShadow: [
          const BoxShadow(
            color: ui_kit.Theme.secoundary,
            blurRadius: 20,
            offset: Offset(0, 12),
          ),
        ],
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          
          ...destinations.expand(
            (element) => [
              _NavigationBarDestination(
                title: element.title,
                icon: element.icon,
                isSelected: element == destinations[selectedIndex],
                onPressed: () => onDestnationChange(
                  destinations.indexOf(element),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class NavigationBarDestination {
//
  final String title;

  final String icon;

  // final String route;

  const NavigationBarDestination({
    required this.title,
    required this.icon,
    // required this.route,
  });
}

class _NavigationBarDestination extends StatelessWidget {
//
  final String title;

  final String icon;

  final bool isSelected;

  final int? badgeCount;

  final void Function() onPressed;

  const _NavigationBarDestination({
    required this.title,
    required this.icon,
    required this.isSelected,
    required this.onPressed,
    this.badgeCount,
  });

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.transparent,
      borderRadius: BorderRadius.circular(ui_kit.Theme.radius),
      child: InkWell(
        borderRadius: BorderRadius.circular(ui_kit.Theme.radius),
        onTap: onPressed,
        child: Padding(
          padding: const EdgeInsets.all(5.0),
          child: Column(
            children: [
              ui_kit.SvgImage(
                path: icon,
                size: 24,
                color: isSelected ? ui_kit.Theme.primary : ui_kit.Theme.outline,
              ),
              Spacer(),
              ui_kit.Text(
                title,
                size: ui_kit.TextSize.sm,
                color: isSelected ? ui_kit.Theme.primary : ui_kit.Theme.outline,
                weight: isSelected ? ui_kit.TextWeight.bold : ui_kit.TextWeight.medium,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

and this is my page that im using it :

class HomeShell extends StatelessWidget {
  final StatefulNavigationShell child;

  const HomeShell({super.key, required this.child});

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => HomeCubit(),
      child: SafeArea(
        child: Scaffold(
          backgroundColor: ui_kit.Theme.background,
          body: Builder(
            builder: (context) {
              print(child.currentIndex);
              var homeCubit = BlocProvider.of<HomeCubit>(context);
              var selectedIndex = child.currentIndex;
              var bottomNavigationBarDestindations = [
                const ui_kit.NavigationBarDestination(
                  icon: ui_kit.Images.dashboard,
                  title: "Dashboard",
                ),
                const ui_kit.NavigationBarDestination(
                  icon: ui_kit.Images.users,
                  title: "Users",
                ),
              ];
              if (tool_kit.Responsive.isMobile(context)) {
                print("ok");
              }
              homeCubit.onDestnationChange(selectedIndex);

              return Column(
                children: [
                  Expanded(child: child),
                  SizedBox(
                    width: MediaQuery.of(context).size.width * 0.6,
                    child: ui_kit.NavigationBar(
                      destinations: bottomNavigationBarDestindations,
                      selectedIndex: selectedIndex,
                      onDestnationChange: (selectedIndex) {
                        child.goBranch(selectedIndex);
                      },
                    ),
                  ),
                  Container(
                    height: 25,
                    color: ui_kit.Theme.background,
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

this is my gorouter configuration :

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:new_admin/modules/dashboard/dashboard.dart';
import 'package:new_admin/modules/home/home_shell.dart';
import 'package:new_admin/modules/users/users.dart';

final rootNavKey = GlobalKey<NavigatorState>();
final router = GoRouter(
  navigatorKey: rootNavKey,
  initialLocation: Dashboard.route,
  redirect: (context, state) => Dashboard.route,
  routes: [
    StatefulShellRoute.indexedStack(
        builder: (context, state, navigationShell) {
          return HomeShell(
            child: navigationShell,
          );
        },
        branches: [
          StatefulShellBranch(
            routes: [
              GoRoute(
                path: Dashboard.route,
                name: Dashboard.route,
                // builder: (context, state) {
                //   return const Dashboard();
                // },
                pageBuilder: (context, state) => const MaterialPage(child: Dashboard()),
              ),
            ],
          ),
          StatefulShellBranch(
            routes: [
              GoRoute(
                path: Users.route,
                name: Users.route,
                // builder: (context, state) {
                //   return const Users();
                // },
                pageBuilder: (context, state) => const MaterialPage(child: Users()),
              ),
            ],
          ),
        ])
  ],
);

and my ondestinationchanged method in cubit :

void onDestnationChange(int index) {
    emit(state.copywith(selectedDes: index));
  }

and my state :

part of 'home_cubit.dart';

class HomeState extends Equatable {
  final int selectedDes;

  const HomeState({this.selectedDes = 0});

  HomeState copywith({
    int? selectedDes,
  }) {
    return HomeState(
      selectedDes: selectedDes ?? this.selectedDes,
    );
  }

  @override
  List<Object> get props => [selectedDes];
}

i have tried to recheck all codes and nothing happend