bottom_bar_with_sheet 1.1.1
bottom_bar_with_sheet: ^1.1.1 copied to clipboard

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

bottom_bar_with_sheet #

Build Status License Pub Stars

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

ImageImageImage

Getting Started #

Add dependency #

dependencies:
  bottom_bar_with_sheet: ^1.1.1

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(
        selectedIndex: 0,
        sheetChild: Center(child: Text("Place for your another content")),
        bottomBarTheme: BottomBarTheme(
          mainButtonPosition: MainButtonPosition.middle,
          selectedItemBackgroundColor: const Color(0xFF2B65E3),
        ),
        mainActionButtonTheme: MainActionButtonTheme(
          size: 60,
          color: const Color(0xFF2B65E3),
          icon: Icon(
            Icons.add,
            color: Colors.white,
            size: 35,
          ),
        ),
        onSelectItem: (index) => print('item $index was pressed'),
        items: [
          BottomBarWithSheetItem(icon: Icons.people),
          BottomBarWithSheetItem(icon: Icons.shopping_cart),
          BottomBarWithSheetItem(icon: Icons.settings),
          BottomBarWithSheetItem(icon: Icons.favorite),
        ],
      ),
/// ----------------------------------[end of widget]----------------------------------
    );

More examples you can see here

Attributes #

AttributeTypeAnnotation
isOpenedboolResponsible for the open / closed state of the widget
autoCloseboolIf true the [BottomBarWithSheetItem]'s DO NOT automatically close the child sheet when pressed
disableMainActionButtonbooldisable MainActionButton if true , enable if false
sheetChildWidgetthat displayed on bottom of BottomBarWithSheet when isOpened == true
itemsList BottomBarWithSheetItemnavigation buttons of BottomBarWithSheet
bottomBarThemeBottomBarThemetheme of BottomBarWithSheet
mainActionButtonThemeMainActionButtonThemetheme of Main Action Button
onSelectItemFunctionCallback Function works by clicking on one of items Return int index of selected button
selectedIndexintindex of selected BottomBarWithSheetItem from items
durationDurationanimation time of closing / opening BottomBarWithSheet
curveCurvethe style of animation from the suggested ones of Curve
bottomBarMainAxisAlignmentMainAxisAlignmentThe direction in which the widget content will line up
mainActionButtonMainActionButtonCustom version of Main Action Button

Attributes of BottomBarTheme #

AttributeTypeAnnotation
heightdoubleBottomBarWithSheet icons line height
heightOpeneddoubleBottomBarWithSheet height when isOpened == true
heightCloseddoubleBottomBarWithSheet height when isOpened == false
decorationBoxDecorationdecoration of BottomBarWithSheet
contentPaddingEdgeInsetscreate padding between content of widget and sides
backgroundColorColorBottomBarWithSheet background color
selectedItemIconColorColorselected item icon color
itemIconColorColorunselected item icon color
selectedItemLabelColorColorselected item text color
itemLabelColorColorunselected item text color
selectedItemTextStyleColorselected item text style
itemTextStyleColorunselected item text style
selectedItemBackgroundColorColorselected item icon color
selectedItemIconSizedoublesize of item icon when item is pressed
mainButtonPositionenumfiled that response for the position of MainActionButton position this field have 3 possible values: MainButtonPosition.left, MainButtonPosition.right , MainButtonPosition.Center

Attributes of MainActionButtonTheme #

AttributeTypeAnnotation
sizedoublesize of button
iconWidgeticon that displayed when the BottomBarWithSheet when isOpened == false
iconOpenedWidgeticon that displayed when the BottomBarWithSheet when isOpened == true
colorColorbackground color of widget circle
splashColorsplash color of widget circle
marginEdgeInsetsside paddings of Main Action Button
transformMatrix4This field can set transform location of Main Action Button



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

133
likes
130
pub points
79%
popularity

Publisher

frezycode.com

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

Apache 2.0 (LICENSE)

Dependencies

flutter, provider

More

Packages that depend on bottom_bar_with_sheet