šŸ’„Non-standard way to use more space of screens in your applicationšŸ’„
šŸ˜³Custom bottom Sheet under Bottom Navigation BaršŸ˜³
šŸ˜©Sounds sucks? šŸ˜‰First of all look at screens!

Getting Started

Add dependency

  bottom_bar_withs_sheet: ^0.0.1 #latest version

Add import package

import 'package:bottom_bar_with_sheet/bottom_bar_withs_sheet.dart';

Easy to use

      body: Center(child: Text("Place for your content")),

      bottomNavigationBar: BottomBarWithSheet(
        selectedIndex: selectedIndex,
        duration: Duration(milliseconds: 600),
        styleBottomBar: BottomBarTheme(
          barBackgroundColor: Colors.white,
          selectedItemIconColor: Colors.white,
          mainActionButtonSize: 55,
          barHeightClosed: 70,
          barHeightOpened: 400,
          marginBetweenPanelAndActtionButton: 30,
          rightMargin: 15,
          mainActionButtonPadding: EdgeInsets.all(7),
          mainActionButtonIconClosed: Icon(Icons.arrow_drop_up, color:Colors.white , size: 40,),
          mainActionButtonIconOpened: Icon(Icons.arrow_drop_down, color:Colors.white, size: 40,),

        onSelectItem: (index) {
          setState(() {
            selectedIndex = index;

        sheetChild: Center(child: Text("Place for your another content")),

        items: [
            iconData: Icons.people,
            label: 'Profile',
            iconData: Icons.shopping_cart,
            label: 'Cart',
            iconData: Icons.settings,
            label: 'Settings',



sheetChild: an Widget to display on bottom sheet
selectedIndex: index of element in tab panel, can be used to change screens
duration: time to open the sheet
onSelectItem: function handling taps on items in tab panel
isOpened: bool value. Set true if you need to open bottom sheet when page was builded
items: List of BottomBarWithSheetItem(

  • iconData: icon Widget that you use in tab button
  • label: text under tab button
  • selectedBackgroundColor: background color of circle when tab bar is selected
  • itemWidth: custom width of element in tab panel
  • animationDuration: speed of animation
  • itemIconColor: custom color of element in tab panel
styleBottomBar: -> List of style settings to customize your bottom_bar_with_sheet ->(
  • Sizes

  • barBackgroundColor: background color of main Widget
  • rightMargin: size of space between right mobile border and Widget insides
  • leftMargin: size of space between left mobile border and Widget insides
  • marginBetweenPanelAndActtionButton: it seems so clear. No?. Request issue if so.
  • barHeightClosed: main Widget height when sheet is closed
  • barHeightOpened: main Widget height when sheet is opened
  • mainActionButtonPadding: space beetwen circle border and icon of main action button
  • mainActionButtonSize: size of main action button
  • notchMargin: radius of space size between FloatingActionBar and BottomNavigationBar (if you need in FAB)
  • Colors

  • mainActionButtonColorSplash: main action button splash color
  • mainActionButtonColor: main action button color
  • barBackgroundColor: backgroun color of tab panel
  • selectedItemBackgroundColor: background circle color of selected item
  • selectedItemIconColor: color of selected item icon
  • selectedItemLabelColor: color of selected item text
  • itemIconColor: color of unselected item icon
  • itemLabelColor: color of unselected item text
  • Widgets & Full Styles

  • mainActionButtonIconClosed: icon when sheet is closed
  • mainActionButtonIconOpened: icon when sheet is opened
  • selectedItemLabelColor: text style of selected item text
  • itemTextStyle: text style unselected item text
  • borderRadius: main Widget border radius
  • boxShadow: main Widget shadow

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.