custom navigation bar
a custom navigation bar with bubble click effect.
this package gives you a cute bubble effect when you click on the navigation bar.
dribbble:
implemented:
gallery
documentation
you can customize these attributes in the navigation bar.
| attributes | type | description | default |
|---|---|---|---|
scalefactor |
double |
scale factor for the icon scale animation. | 0.2 |
elevation |
double |
the z-coordinate of this customnavigationbar | 8.0 |
items |
list |
item data in customnavigationbar | required |
selectedcolor |
color |
[color] when [customnavigationbaritem] is selected | [blueaccent] |
unselectedcolor |
color |
[color] when [customnavigationbaritem] is not selected. | grey[600] |
ontap |
function(int) |
callback function when item tapped | null |
currentindex |
int |
current index of navigation bar. | 0 |
iconsize |
double |
size of icon. also represent the max radius of bubble effect animation. | 24.0 |
backgroundcolor |
color |
background color of [customnavigationbar] | colors.white |
strokecolor |
color |
stroke color | blueaccent |
bubblecurve |
curve |
animation curve of bubble effect | linear |
scalecurve |
curve |
animation curve of scale effect | linear |
borderradius |
radius |
border radius of navigation bar | radius.zero |
isfloating |
bool |
control if customnavigationbar is floating | false |
and for customize icon in the navigation bar, just put the icons you want in the customnavigationbaritem like this.
customnavigationbar(
...
items: [
customnavigationbaritem(
icon: icons.home,
),
customnavigationbaritem(
icon: icons.shopping_cart,
),
customnavigationbaritem(
icon: icons.lightbulb_outline,
),
customnavigationbaritem(
icon: icons.search,
),
customnavigationbaritem(
icon: icons.account_circle,
),
],
...
)
attention: if you set isfloating to true, i would recommand you to set extendbody to true in scaffold for a better performance.
example
check example app for more details.
future plans
- [x] code format
- [x] make it more like native navigation bar in flutter.
- [x] better documentation
- [ ] more customizations!!
Comments are closed.