ss_bottom_navbar

Publish to Pub.dev

Flutter modern bottom nav bar. Compatible with Android & iOS. You can customize it freely.

Getting Started

dependencies:
  ss_bottom_navbar: 0.0.9
$  flutter pub get
import 'package:ss_bottom_navbar/ss_bottom_navbar.dart';

Example

SSBottomNav

Usage
var items = [
  SSBottomNavItem(text: 'Home', iconData: Icons.home),
  SSBottomNavItem(text: 'Store', iconData: Icons.store),
  SSBottomNavItem(text: 'Add', iconData: Icons.add, isIconOnly: true),
  SSBottomNavItem(text: 'Explore', iconData: Icons.explore),
  SSBottomNavItem(text: 'Profile', iconData: Icons.person),
];
SSBottomNav(
  items: items,
  color: Colors.black,
  selectedColor: Colors.white,
  unselectedColor: Colors.black,
  onTabSelected: (index) {
     print(index);
     setState(() {
        _index = index;
    });
  }
),
With bottom sheet dialog
SSBottomNav(
  items: items,
  color: Colors.black,
  selectedColor: Colors.white,
  unselectedColor: Colors.black,
  visible: isVisible,
  bottomSheetWidget: Container(),
  showBottomSheetAt: 2,
  onTabSelected: (index) {}
),

Customization

NameTypeDescription
itemsList<SSBottomNavItem>list of SSBottomNavItem items
iconSizedoublesize of the icon on items
backgroundColorColorbackground color of the widget
colorColorcolor of the slider
selectedColorColoritems's color when selected
unselectedColorColoritems's color when not selected
onTabSelectedValueChanged<int>function that returns the index on tab selected
shadowList<BoxShadow>shadow of the slider
visibleboolvisibilty of the SSBottomNavItem
bottomSheetWidgetWidgetchild of the bottom sheet dialog
showBottomSheetAtintthe index of SSBottomNavItem to show the SSBottomNavItem
bottomSheetHistorybooldefault true. option to go back previous tab if showBottomSheetAt pressed while SSBottomSheet showing
dismissedByAnimationValueChanged<bool>function that returns true if SSBottomSheet dismissed by animation

SSBottomSheet

SSBottomSheet Showcase Image

If you want to use SSBottomNav's bottom sheet dialog, you can do that with SSBottomSheet

Usage
SSBottomSheet.show(
  context: context,
  child: bottomSheet(),
  onPressed: (offset) {}
);
bottomSheet() => Container(
  color: Colors.white,
  child: Column(
    children: [
      ListTile(
        leading: Icon(Icons.camera_alt),
        title: Text('Use Camera'),
      ),
      ListTile(
        leading: Icon(Icons.photo_library),
        title: Text('Choose from Gallery'),
      ),
      ListTile(
        leading: Icon(Icons.edit),
        title: Text('Write a Story'),
      ),
    ],
  ),
);
Dismiss the Bottom Sheet
Navigator.maybePop(context);

Customization

NameTypeDescription
Widgetchildchild widget
backgroundColorColorbackground color of the widget
bottomMargindoublemargin from bottom acording to your bottom navbars height
onPressedValueChanged<Offset>returns Offset when tapped

Contributions

Contributions of any kind are more than welcome! Feel free to fork and improve in any way you want, make a pull request, or open an issue.

Libraries

empty_item
service
slide_box
ss_bottom_navbar