rolling navigation bar
a bottom navigation bar with layout inspired by this design and with heavily customizable animations, colors, and shapes.
getting started
to get started, place your rollingnavbar
in the bottomnavigationcar
slot of a
scaffold
, wrapped in a widget that provides max height. for example:
scaffold(
bottomnavigationbar: container(
height: 95,
child: rollingnavbar(
// nav items
),
)
);
alternatively, you can place it directly using a stack
:
scaffold(
body: stack(
children: <widget>[
positioned(
bottom: 0,
height: 95,
width: mediaquery.of(context).size.width,
child: rollingnavbar(
// nav items
),
)
]
)
);
customization
rollingnavbar
is heavily customizable and works with 3, 4, or 5 navigation elements.
each element is also fully customizable through the two primary ways to specify child
navigation elements.
the first option is to pass a list of icondata
objects, along with optional lists
of color
objects.
rollingnavbar.icondata(
icondata: <icondata>[
icons.home,
icons.people,
icons.settings,
],
indicatorcolors: <color>[
colors.red,
colors.yellow,
colors.blue,
],
)
the second option is to pass a list of widgets, though less automatic active-state handling
is available in this method.
rollingnavbar.children(
children: <widget>[
text('1', style: textstyle(color: colors.grey)),
text('2', style: textstyle(color: colors.grey)),
text('3', style: textstyle(color: colors.grey)),
],
indicatorcolors: <color>[
colors.red,
colors.yellow,
colors.blue,
],
)
animation types
rollingnavbar
comes with four animation flavors for the active indicator’s transition from
tab to tab.
the first animation type is the namesake: animationtype.roll
:
rollingnavbar.icondata(
animationcurve: curves.easeout, // `easeout` (the default) is recommended here
animationtype: animationtype.roll,
baseanimationspeed: 200, // milliseconds
icondata: <icondata>[
...
],
)
note: for the
roll
animation type, your supplied animation speed is a multiplier considered against the distance the indicator must travel. this ensures a constant speed of travel no matter where the user clicks.
the second animation type is is a fade-and-reappear effect:
rollingnavbar.icondata(
animationcurve: curves.linear, // `linear` is recommended for `shrinkoutin`
animationtype: animationtype.shrinkoutin,
baseanimationspeed: 500, // slower animations look nicer for `shrinkoutin`
icondata: <icondata>[
...
],
)
note: for the
shinkoutin
animation type, theyour supplied animation speed is constant, since the active indicator never travels the intermediate distance.
the third animation type is a spinning version of fade-and-reappear:
rollingnavbar.icondata(
animationcurve: curves.linear, // `linear` is recommended for `spinoutin`
animationtype: animationtype.spinoutin,
baseanimationspeed: 500, // slower animations look nicer for `spinoutin`
icondata: <icondata>[
...
],
)
note: like with
shinkoutin
, for thespinoutin
animation type, your supplied animation speed is constant, since the active indicator never travels the intermediate distance.
the final animation flavor is a non-animation:
rollingnavbar.icondata(
// `animationcurve` and `baseanimationspeed` are ignored
animationtype: animationtype.snap,
icondata: <icondata>[
...
],
)
in addition to the above options, animationcurve
and baseanimationspeed
parameters
are also exposed.
hooking into the animation
in the demo, the background of the larger hexagon matches the background of
the navigation bar hexagon. to achieve this and similar effects, two callbacks, ontap
and onanimate
are available. onanimate
can be particularly helpful for syncing visual effects elsewhere in your app with navigation bar progress.
tab item text
if using the icondata
constructor, you are also able to pass a list of widgets
to render as text below inactive icons.
rollingnavbar.icondata(
// a list of length one implies the same color for all icons
iconcolors: <color>[
colors.grey[800],
],
icondata: <icondata>[
icons.home,
icons.friends,
icons.settings,
],
icontext: <widget>[
text('home', style: textstyle(color: colors.grey, fontsize: 12)),
text('friends', style: textstyle(color: colors.grey, fontsize: 12)),
text('settings', style: textstyle(color: colors.grey, fontsize: 12)),
]
)
Comments are closed.