showing Bottom Modal Sheet with out bottom nav bar

[Abdurahmon9679]

so in my screens has buttons for showing bottom modal sheet I need showing this modal sheets with out bottom navigation bars how to make this can you help me for this

PersistentTabView(
  context,
  controller: _controller,
  screens: _buildScreens(),
  items: _navBarsItems(),
  confineInSafeArea: true,
  backgroundColor: AppColor.white.withOpacity(1),
  handleAndroidBackButtonPress: true,
  // Default is true.
  resizeToAvoidBottomInset: false,
  // This needs to be true if you want to move up the screen when keyboard appears. Default is true.
  stateManagement: true,
  // Default is true.
  hideNavigationBarWhenKeyboardShows: false,
  // Recommended to set 'resizeToAvoidBottomInset' as true while using this argument. Default is true.
  decoration: const NavBarDecoration(
    border: Border(
      top: BorderSide(color: AppColor.greyBottomIcons, width: 0.33),
    ),
  ),
  onItemSelected: (int index) {
    mainCubit.changeIndex(index);
    AppEventBus().eventBus.fire(SwitchBottomNavbar(index: index));
  },
  popAllScreensOnTapOfSelectedTab: true,
  popActionScreens: PopActionScreensType.all,
  itemAnimationProperties: const ItemAnimationProperties(
    // Navigation Bar's items animation properties.
    duration: Duration(milliseconds: 200),
    curve: Curves.ease,
  ),
  screenTransitionAnimation: const ScreenTransitionAnimation(
    // Screen transition animation on change of selected tab.
    animateTabTransition: true,
    curve: Curves.ease,
    duration: Duration(milliseconds: 200),
  ),
  navBarStyle: NavBarStyle
      .simple, // Choose the nav bar style with this property.
),

List<Widget> _buildScreens() {
  return [
    EventsList(
      isFirstEvent: widget.isFirstEvent,
    ),

    ///EventsScreen
    Container(),
    // const EventDetailsScreen(),

    ///InvitationsScreen
    const VendorsScreen(),

    /// settings
    const SettingsScreen()
  ];
} 

[jb3rndt]

Hi,

you can show a modal bottom sheet without the navbar by setting useRootNavigator: true. Settings that to false will show the modal bottom sheet with the navbar.

Here is an example:

 showModalBottomSheet(
  context: context,
  backgroundColor: Colors.white,
  useRootNavigator: true,
  builder: (context) => Center(
    child: ElevatedButton(
      onPressed: () {
        Navigator.pop(context);
      },
      child: const Text(
        "Exit",
        style: TextStyle(color: Colors.white),
      ),
    ),
  ),
);