Flutter custom Bottom Bar Widget.

?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!

example_day_theme example_night_theme

Getting Started

Add dependency

  bottom_bar_with_sheet: ^0.2.0 #latest version

Add import package

import 'package:bottom_bar_with_sheet/bottom_bar_with_sheet.dart';

Easy to use

Create a Scaffold widget and set bottomNavigationBar with BottomBarWithSheet like in the code below

      body: Center(child: Text("Place for your content")),
// -----------------------------------------------------------------------------
      bottomNavigationBar: BottomBarWithSheet(
        sheetChild: Center(child: Text("Place for your another content")),
        selectedIndex: 0,
        styleBottomBar: BottomBarTheme(
          mainButtonPosition: MainButtonPosition.right,
          mainActionButtonSize: 55,
          barHeightClosed: 75,
          barHeightOpened: 400,
          mainActionButtonIconClosed: Icon(
            color: Colors.white,
            size: 30,
          mainActionButtonIconOpened: Icon(
            color: Colors.white,
            size: 30,
        onSelectItem: (index) => print("$index bar item is selected"),
        items: [
            iconData: Icons.people,
            label: 'Profile',
            iconData: Icons.shopping_cart,
            label: 'Cart',
            iconData: Icons.settings,
            label: 'Settings',
// ----------------------------------[end of widget]----------------------------------


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.