ss_bottom_navbar
Flutter modern bottom nav bar. Compatible with Android & iOS. You can customize it freely.
Getting Started
dependencies:
ss_bottom_navbar: 0.1.1
$ flutter pub get
import 'package:ss_bottom_navbar/src/ss_bottom_navbar.dart';
Example
SSBottomNav
Usage
Create Items
final 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),
];
Create the state
SSBottomBarState _state = SSBottomBarState();
SSBottomNav(
items: items,
state: _state,
color: Colors.black,
selectedColor: Colors.white,
unselectedColor: Colors.black,
onTabSelected: (index) {
debugPrint(index);
setState(() {
_index = index;
});
}
),
With bottom sheet dialog
SSBottomNav(
items: items,
state: _state,
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 |
state |
SSBottomBarState |
state of the bottome bar as ChangeNotifier |
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.
![[FEATURE] Option to go back to the previous item when showBottomSheetAt clicked while SSBottomSheet showing](https://avatars.githubusercontent.com/u/49204989?v=4)
]
4 Jan 26, 2020
9 Nov 27, 2022
3 Oct 17, 2022
3 May 26, 2022
70 Nov 25, 2022
2 Oct 25, 2022
4 Sep 23, 2021
26 Sep 26, 2022
22 Nov 2, 2022
1 Dec 8, 2021
526 Jan 4, 2023
14 Dec 29, 2022
7 Nov 2, 2022
18 Nov 24, 2022
9 Dec 14, 2022
15 Jan 2, 2023
9 Dec 5, 2022
24 Dec 10, 2022
30 Dec 21, 2022