GitLocker: The Coding Marketplace

Description:

bottom bar with sheet

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!

Table of Content #

Getting Started
Attributes
Attributes of BottomBarTheme
Attributes of MainActionButtonTheme

Getting Started #
Add dependency #
dependencies:
bottom_bar_with_sheet: ^2.4.0
copied to clipboard
Add import package #
import 'package:bottom_bar_with_sheet/bottom_bar_with_sheet.dart';
copied to clipboard
Easy to use #
Create a Scaffold widget and set bottomNavigationBar with BottomBarWithSheet like in the code below
Scaffold(
bottomNavigationBar: BottomBarWithSheet(
controller: _bottomBarController,
bottomBarTheme: const BottomBarTheme(
decoration: BoxDecoration(color: Colors.white),
itemIconColor: Colors.grey,
),
items: const [
BottomBarWithSheetItem(icon: Icons.people),
BottomBarWithSheetItem(icon: Icons.favorite),
],
),
);
copied to clipboard
More examples you can see here

Attributes #

Attribute
Type
Annotation

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

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

mainActionButtonBuilder
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

isVerticalItemLabel
bool
makes the labels of the items appear vertically or horizontally

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.