Awesome Open Source
Awesome Open Source

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!

Image Image Image

Getting Started

Add dependency

dependencies:
  bottom_bar_with_sheet: ^2.0.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

Attribute Type Annotation
isOpened bool Responsible for the open / closed state of the widget
autoClose bool If true the [BottomBarWithSheetItem]'s DO NOT automatically close the child sheet when pressed
disableMainActionButton bool disable MainActionButton if true , enable if false
sheetChild Widget that displayed on bottom of BottomBarWithSheet when isOpened == true
items List BottomBarWithSheetItem navigation buttons of BottomBarWithSheet
bottomBarTheme BottomBarTheme theme of BottomBarWithSheet
mainActionButtonTheme MainActionButtonTheme theme of Main Action Button
onSelectItem Function Callback Function works by clicking on one of items Return int index of selected button
selectedIndex int index of selected BottomBarWithSheetItem from items
duration Duration animation time of closing / opening BottomBarWithSheet
curve Curve the style of animation from the suggested ones of Curve
bottomBarMainAxisAlignment MainAxisAlignment The direction in which the widget content will line up
mainActionButton MainActionButton Custom version of Main Action Button

Attributes of BottomBarTheme

Attribute Type Annotation
height double BottomBarWithSheet icons line height
heightOpened double BottomBarWithSheet height when isOpened == true
heightClosed double BottomBarWithSheet height when isOpened == false
decoration BoxDecoration decoration of BottomBarWithSheet
contentPadding EdgeInsets create padding between content of widget and sides
backgroundColor Color BottomBarWithSheet background color
selectedItemIconColor Color selected item icon color
itemIconColor Color unselected item icon color
selectedItemTextStyle Color selected item text style
itemTextStyle Color unselected item text style
selectedItemIconSize double size of item icon when item is pressed
mainButtonPosition enum filed that response for the position of MainActionButton position this field have 3 possible values: MainButtonPosition.left, MainButtonPosition.right , MainButtonPosition.Center

Attributes of MainActionButtonTheme

Attribute Type Annotation
size double size of button
icon Widget icon that displayed in center of MainActionButton
color Color background color of widget circle
splash Color splash color of widget circle
margin EdgeInsets side paddings of Main Action Button
transform Matrix4 This 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.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Dart (61,821
Android (41,112
Flutter (11,761
Ui (5,292
Animation (5,123
Widget (1,860
Flutter Examples (1,473
Android Ui (906
Ui Design (752
Flutter Package (640
Flutter Widgets (477
Flutter Material (264
Related Projects