Flutter custom Bottom Bar Widget
bottom_bar_with_sheet
Flutter custom Bottom Bar Widget.
?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.2.0 #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
- rightMargin: 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.