How I can make the ElevatedButton navigate to a second page on the BottomNavigationBar?

The problem with my code is it does go to Dashbored() page but the icon belong to the home page and it has only one page.

home_page.dart

ElevatedButton(
                      
                      style: ElevatedButton.styleFrom(alignment: Alignment.center,
                        fixedSize: const Size(160, 50),
                        backgroundColor:
                            const Color.fromARGB(255, 0, 93, 186),
                        foregroundColor:
                            const Color.fromARGB(255, 69, 164, 243),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(28),
                        ),
                      ),
                      onPressed: () {
                        Navigator.pushReplacement(
                            context,
                            MaterialPageRoute(
                              builder: (context) => const Layout(children: {1:Dashbored()}),
                            ));
                      },
                      child: const Text(
                        "START ALGORITHM",
                        style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 14),
                      ),
                    ),

main.dart

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

  @override
  Widget build(BuildContext context) {
    Map<int,Widget> pages = {
      0:const HomePage(),
      1:const Dashbored(),
      2:const Products(),
      3:const Profile(),
    };
    return Layout(
      children: pages,
    );
  }
}

Layout.dart

class Layout extends StatefulWidget {
  const Layout({super.key, required this.children});
  final Map<int,Widget> children;

  @override
  State<Layout> createState() => _LayoutState();
}

class _LayoutState extends State<Layout> {
  int pageIndex = 0;
  onNavigationChanged(int index) {
    setState(() {
      pageIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    // int index =1;
    return Scaffold(
      appBar: const MyAppBar(),
      endDrawer: const MyDrawer(),
      bottomNavigationBar: MyNavigationBar(
        onNavigationChanged: onNavigationChanged,
        pageIndex: pageIndex,
      ),
      body: widget.children[pageIndex],
    );
  }
}

I expect when I press the button should navigate to the second index in the BottomNavigationBar without lose the other pages.

How I can make the ElevatedButton navigate to a second page on the BottomNavigationBar?

Bro this button is supposed to call this function :

onNavigationChanged(int index) {
    setState(() {
      pageIndex = index;
    });
  }

But you are using Navigator which is totally different and they are not related, because you are changing the screens manually.
The solution is to pass down the function i mentioned to MyNavigationBar() that you created and there trigger the function with the index you want on each button.