Bottom Sheet Expandable Bar for Flutter

  Navigation bar, Widgets

Bottom Sheet Expandable Bar

This package create a bottom navigation bar with the capability to show a bottom sheet.

Instalation

Include bottom_sheet_expandable_bar in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  bottom_sheet_expandable_bar: version

Usage

To use this package, just import it into your file and enjoy it.

import 'package:bottom_sheet_expandable_bar/bottom_sheet_bar_icon.dart';
import 'package:bottom_sheet_expandable_bar/bottom_sheet_expandable_bar.dart';

...

bottomSheet: BottomBarSheet(
  children: [
    BottomSheetBarIcon(
      icon: Icon(Icons.home),
      color: Colors.redAccent, 
      onTap: (){
      },
    ),
    BottomSheetBarIcon(
      icon: Icon(Icons.person),
      color: Colors.blueAccent, 
      onTap: (){
      },
    ),
    BottomSheetBarIcon(
      icon: Icon(Icons.edit),
      color: Colors.blue[800], 
      onTap: (){
      },
    ),
    BottomSheetBarIcon(
      icon: Icon(Icons.star),
      color: Colors.orangeAccent, 
      onTap: (){
      },
    ),
  ],
),

...

IMPORTANT: Add this line to your theme to avoid an unexpected behaviour

theme: ThemeData(
  /// Add this line
  bottomSheetTheme: BottomSheetThemeData(backgroundColor: Colors.transparent),
),

BottomSheetBarIcon

This widget allow to generate a dynamic icon

Properties

NameDescriptionRequiredDefault
iconWidget to put as button iconFalse
colorColor to indicate icon colorFalseColors.black
onTapFunction to handle button on tapTrue

BottomBarSheet

This widget allow to generate a bottom bar with the capability to expanto to a bottom sheet

Properties

NameDescriptionRequiredDefault
childrenList of BottomSheetBarIcon widget to show icons within the barFalse
buttonPositionButtonBottomBarPosition to indicate expandable button position (center, end)FalseButtonBottomBarPosition.center
backgroundBarColorColor to indicate bottom bar background colorFalseColors.white
backgroundColorColor to indicate bottom sheet colorFalseColors.white
showExpandableButtonBoolean value to indicate when to show or hide expandable buttonFalseFalse
innerChildWidget to show into the bottom sheetFalse
bottomRadiusDouble value to indicate the corners radius for the bottom barFalse50.0
bottomBarHeightDouble value to indicate the bottom bar heightFalse60.0
bottomBarWidthDouble value to indicate the bottom bar heightFalseScreen width * 0.9
durationDuration between show or hide the bottom sheetFalse250 milliseconds
bottomSheetHeightDouble value to indicate the bottom sheet heightFalseScreen height * 0.75
iconExpandIcon to show into the expandable buttonFalseIcon(Icons.navigation)
iconColorExpandable button colorFalseColors.green
onCloseFunction to call when bottom sheet is closedFalse(){}
currentIndexInteger value to indicatet which tab is selectedFalse0
curveCurve to use on enter bottom sheet animationFalseCurves.ease

Expandable button at center

Expandable button at end

As a simple navigation bar

Bottom Sheet Expandable Bar

Download Bottom Sheet Expandable Bar source code on GitHub