How to eliminate stacks in screen switching

Question

I have a few screens that I need to switch between using the BottomNavigationBar in Flutter when I tap on the Icons.

I'm calling the different screens in a List widget below:

List<Widget> pages = [
    const Dashboard(),
    const HomePage(checklistData: [], numberofForms: 0, userData: {},),
    const ScannerPage(title: 'Scan QR Code',),
    const Notifications(),
    const Login(),

  ];

However, this is the output when I click on one Icon to call up the screen that I need:

Stacked Up Screen

The first AppBar with "Maintenance Checklist" is from the screen I'm calling. The second AppBar with "Welcome back, Agent Wesley!" is from the Dashboard() screen which should be disappearing when calling the Checklist screen.

How do I make sure that the content of the screen I call is what appears on that screen not all content from other screens?

Here is my Scaffold from Dashboard() that I think is causing the problem:

      backgroundColor: Constants.primaryColor,
      body: Stack(
        clipBehavior: Clip.none,
        children: [
          pages.elementAt(activeIndex),
          SingleChildScrollView(
            child: Container(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  const SizedBox(
                    height: kToolbarHeight,
                  ),
                  Container(
                    padding: const EdgeInsets.symmetric(
                      horizontal: 16.0,
                    ),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        GestureDetector(
                          onTap: () {
                            Navigator.pop(context);
                          },
                          child: const Icon(
                            FlutterIcons.keyboard_backspace_mdi,
                            color: Colors.white,
                          ),
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            RichText(
                              text: TextSpan(
                                children: [
                                  TextSpan(
                                    text: "Welcome back,\n",
                                    style: Theme.of(context)
                                        .textTheme
                                        .headline6
                                        ?.copyWith(
                                          color: Colors.white,
                                        ),
                                  ),
                                  TextSpan(
                                    text: "Agent Wesley!",
                                    style: Theme.of(context)
                                        .textTheme
                                        .headline6
                                        ?.copyWith(
                                          color: Colors.white,
                                          fontWeight: FontWeight.w600,
                                        ),
                                  )
                                ],
                              ),
                            ),
                          ],
                        )
                      ],
                    ),
                  ),
                  const SizedBox(
                    height: 50.0,
                  ),
                  Container(
                    width: double.infinity,
                    constraints: BoxConstraints(
                      minHeight: MediaQuery.of(context).size.height - 200.0,
                    ),
                    decoration: BoxDecoration(
                      borderRadius: const BorderRadius.only(
                        topLeft: Radius.circular(30.0),
                        topRight: Radius.circular(30.0),
                      ),
                      color: Constants.scaffoldBackgroundColor,
                    ),
                    padding: const EdgeInsets.symmetric(
                      vertical: 24.0,
                    ),
                    child: Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        const Padding(
                          padding: EdgeInsets.symmetric(
                            horizontal: 24.0,
                          ),
                          child: Text(
                            "Agent Services",
                            style: TextStyle(
                              color: Color.fromRGBO(19, 22, 33, 1),
                              fontSize: 18.0,
                            ),
                          ),
                        ),
                        const SizedBox(height: 7.0),
                        Container(
                         height: 100.0,
                          child: const Center(
                            // lets make a widget for the cards
                            //child: ServiceSlider(),
                          ),
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
          ),
        ],
      ),
    );

Answer 1

you can use navigator (https://docs.flutter.dev/cookbook/navigation/navigation-basics) or use PageView (https://api.flutter.dev/flutter/widgets/PageView-class.html)