Issue with PersistentTabView

[thubamamba]

I am new to this package and I have been trying to set up a bottom_navigation component which can be used on selected pages within my app.

Below is my bottom_navigation.dart:

import 'package:mobile_app/utils/library/my_app.dart';

class BottomNavBar extends StatelessWidget {
  final PersistentTabController controller;

  const BottomNavBar({super.key, required this.controller});

  List<PersistentTabConfig> _tabs() => [
    PersistentTabConfig(
      screen: const HomePage(),
      item: ItemConfig(
        icon: const Icon(Icons.home),
        title: "Home",
      ),
    ),
    PersistentTabConfig(
      screen: const ProfileViewPage(),
      item: ItemConfig(
        icon: const Icon(Icons.message),
        title: "Messages",
      ),
    ),
    PersistentTabConfig(
      screen: const ProfileViewPage(),
      item: ItemConfig(
        icon: const Icon(Icons.settings),
        title: "Settings",
      ),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return PersistentTabView(
      navBarOverlap: const NavBarOverlap.full(),
      controller: controller,
      tabs: _tabs(),
      navBarBuilder: (navBarConfig) => Style4BottomNavBar(
        navBarConfig: navBarConfig,
        navBarDecoration: const NavBarDecoration(
          //boxShadow: const [BoxShadow(color: Colors.grey, blurRadius: 5)],
          // color: bottombackgroundColor,
        ),
      ),
      backgroundColor: AppColors.primary,
      stateManagement: true,
      popAllScreensOnTapAnyTabs: true,
      popActionScreens: PopActionScreensType.all,
      screenTransitionAnimation: const ScreenTransitionAnimation(
        curve: Curves.ease,
        duration: Duration(milliseconds: 200),
      ),
    );
  }
}

This for instance is my homepage:

import 'package:mobile_app/utils/library/my_app.dart';

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final PersistentTabController _controller = PersistentTabController(initialIndex: 0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Page'),
      ),
      body: const Text("Welcome home"),
      bottomNavigationBar: BottomNavBar(controller: _controller),
    );
  }
}

However, I get an issue with the navbar being populated and repeated across the entire page.

I'd appreciate the help in the right direction. Thank you.

[jb3rndt]

Hi, yes there is a misconception about what the PersistentTabView does. In essence, the PersistentTabView is like a Scaffold that holds your pages and the bottom navigation bar. So you need to remove the BottomNavBar from the Scaffold in your HomePage, ProfileViewPage and so on.

[thubamamba]

Hey @jb3rndt, thanks I was able to figure out what the issue was.