ss_bottom_navbar

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

Getting Started

dependencies:
  ss_bottom_navbar: 0.0.10

$  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

Name	Type	Description
`items`	`List<SSBottomNavItem>`	list of `SSBottomNavItem` items
`iconSize`	`double`	size of the icon on items
`backgroundColor`	`Color`	background color of the widget
`color`	`Color`	color of the slider
`selectedColor`	`Color`	items's color when selected
`unselectedColor`	`Color`	items's color when not selected
`onTabSelected`	`ValueChanged<int>`	function that returns the index on tab selected
`shadow`	`List<BoxShadow>`	shadow of the slider
`visible`	`bool`	visibilty of the `SSBottomNavItem`
`bottomSheetWidget`	`Widget`	child of the bottom sheet dialog
`showBottomSheetAt`	`int`	the index of `SSBottomNavItem` to show the `SSBottomNavItem`
`bottomSheetHistory`	`bool`	default `true`. option to go back previous tab if `showBottomSheetAt` pressed while `SSBottomSheet` showing
`dismissedByAnimation`	`ValueChanged<bool>`	function that returns true if `SSBottomSheet` dismissed by animation

SSBottomSheet

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

Name	Type	Description
`Widget`	`child`	child widget
`backgroundColor`	`Color`	background color of the widget
`bottomMargin`	`double`	margin from bottom acording to your bottom navbars height
`onPressed`	`ValueChanged<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.

ss_bottom_navbar package

ss_bottom_navbar

Getting Started

Example

SSBottomNav

Usage

With bottom sheet dialog

Customization

SSBottomSheet

Usage

Dismiss the Bottom Sheet

Customization

Contributions

Libraries