Local navigation inside body of a Scaffold

Question

I'm trying to navigate locally inside the body of a Scaffold in Flutter. In particular, I wanna push a new body of the Scaffold when '+' button is pressed. Important: I wanna keep app and bottom bars the same! See image for reference. How can I do it?

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: const Home(),
    theme: ThemeData(
      colorScheme: ColorScheme.fromSeed(
        seedColor: Colors.yellow,
      ),
    ),
  ));
}


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

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int _selectedIndex = 0;
  final List<Widget> _screens = <Widget>[
    HomeScreen(),
    StatsScreen()
  ];

  void _onItemTap(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: NavigationBar(
        labelBehavior: NavigationDestinationLabelBehavior.onlyShowSelected,
        selectedIndex: _selectedIndex,
        destinations: const <Widget>[
          NavigationDestination(
              icon: Icon(Icons.home),
              label: 'Home'
          ),
          NavigationDestination(
            icon: Icon(Icons.trending_up),
            label: 'Statistics',
          ),
        ],
        onDestinationSelected: _onItemTap,
      ),
      body: _screens.elementAt(_selectedIndex),
    );
  }
}


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
        actions: [
          IconButton(
            onPressed: () {
              Navigator.push(context, MaterialPageRoute(builder: (context) => SettingsScreen()));
            },
            icon: const Icon(Icons.settings),
          ),
        ],
      ),
      body: Column(
        children: [
          Expanded(child: Container(color: Colors.yellow)),
          Container(
              padding: EdgeInsets.all(8),
              alignment: Alignment.bottomRight,
              child: FloatingActionButton(
                  onPressed: () {}, //need to push a new body here
                  child: Icon(Icons.add)))
        ],
      ),
    );
  }
}

I already saw this similar question but the answer and the edits aren't clear for me at all, since there aren't all the files listed. The only thing I knew by reading that question is that I need my own navigator to do the trick, since the default one acts like a stack for the entire screen, so if I use it, it will put a new Scaffold above the curent.

Answer 1

In this case you can create a list of widget

  final List<Widget> _pages = [
  const Page1(), // add your pages
  const Page2()];

And in the body part you can changes this list index to pass another widget to your body

Scaffold(
  body:
      _pages[Index],
  bottomNavigationBar: bottomNavigationBar(),
);

By this you can switch the body and your bottom navigation will remain same.