bottom_bar_with_sheet 0.1.3

This package help you to create bottom bar with FloatingActionButton which buld BottomSheet widget on every page.

bottom_bar_with_sheet

💥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

dependencies:
  bottom_bar_with_sheet: ^0.1.3 #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

Scaffold(
      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(
            Icons.add,
            color: Colors.white,
            size: 30,
          ),
          mainActionButtonIconOpened: Icon(
            Icons.close,
            color: Colors.white,
            size: 30,
          ),
        ),
        onSelectItem: (index) => print("$index bar item is selected"),
        items: [
          BottomBarWithSheetItem(
            iconData: Icons.people,
            label: 'Profile',
            selectedBackgroundColor: Colors.blue,
          ),
          BottomBarWithSheetItem(
            iconData: Icons.shopping_cart,
            label: 'Cart',
            selectedBackgroundColor: Colors.blue,
          ),
          BottomBarWithSheetItem(
            iconData: Icons.settings,
            label: 'Settings',
            selectedBackgroundColor: Colors.blue,
          ),
        ],
      ),
// ----------------------------------[end of widget]----------------------------------
    );

Attributes

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
• otherMargin: 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.