bottom navbar
bottom navbar
flutter modern bottom nav bar. compatible with android & ios. you can customize it freely.
getting started
dependencies:
ss_bottom_navbar: 0.1.0
$ flutter pub get
import 'package:ss_bottom_navbar/src/ss_bottom_navbar.dart';
example
bottom navbar
ssbottomnav
bottom navbar
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) {
print(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 |
Comments are closed.