Navigation to sub page(nasted Navigation)

Question

I love to design an app with features like the ones in this Gif

1-Bottom Navigation bar exists on every page(done)

2-pressing on the icon change only part of the page

My Main to move between pages

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int selectedPage = 2;
  final _pageOptions = [const PageOne(),const  PageTwo(),const PageThree()];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pageOptions[selectedPage],
      bottomNavigationBar: BottomNavigationBar(
        items:const  [
          BottomNavigationBarItem(icon: Icon(Icons.add), label: ""),
          BottomNavigationBarItem(icon: Icon(Icons.abc), label: ""),
          BottomNavigationBarItem(icon: Icon(Icons.access_alarm), label: ""),
        ],
        onTap: (int index) {
          setState(() {
            selectedPage = index;
          });
        },
      ),
    );
  }
}

pressing on the icon change only part of the page

Thanks in advance

Answer 1

I used Tabbar in Appbar and use the body of scafoldto change the sub-page

final List<Tab> myTabs = <Tab>[
    Tab(text: 'LEFT'),
    Tab(text: 'RIGHT'),
  ];
var Pages=[const PageFour(),const PageFive()];
int pageNum=1;
  @override
  Widget build(BuildContext context) {
    return  DefaultTabController(
      length: 2,
      initialIndex: 1,
      child: Scaffold(        
       appBar: AppBar(      
         
        bottom:TabBar(              
                tabs: myTabs,
                onTap: (value) {
                  setState(() {
                    pageNum=value;
                  });
                
                }
                
              ),
          ),
        ),
         ) 
      
        
        body: Pages[pageNum],}

I found some solutions using Getx or auto-router but it was difficult to understand it for me as a beginner I hope this answer helps whoever facing the same problem despite I didn't know how to navigate using the page itself as shown in Gif if anyone knows how to do that please answer below.