animated_notch_bottom_bar

Description:

animated notch bottom bar

Animated Notch Bottom Bar #


























A Flutter package for animating the position of selected item in bottomNavigationBar with notch like design. Inspired by react-native-tabbar-interaction plugin.
Features : #

Supports any widget as as a bottom bar children.
Animates the notch toward selected item.
Create an optimized bottom navigation bar with beautiful animation.
Supports blur effect like iOS Tab View.


Getting Started #
Add the dependency in pubspec.yaml:
dependencies:
...
animated_notch_bottom_bar: ^1.0.0
copied to clipboard
Basic Usage #
Place AnimatedNotchBottomBar in the bottomNavigationBar parameter of a Scaffold widget and provide NotchBottomBarController to AnimatedNotchBottomBar.
bottomNavigationBar: AnimatedNotchBottomBar(
notchBottomBarController: _controller,
...
)
copied to clipboard
Use any Widget as bottom bar item
You can also set any animated widget.
bottomNavigationBar: AnimatedNotchBottomBar(
pageController: _pageController,
bottomBarItems: [
const BottomBarItem(
inActiveItem: Icon(
Icons.home_filled,
color: Colors.blueGrey,
),
activeItem: Icon(
Icons.home_filled,
color: Colors.blueAccent,
),
itemLabel: 'Page 1',
),
const BottomBarItem(
inActiveItem: Icon(
Icons.star,
color: Colors.blueGrey,
),
activeItem: Icon(
Icons.star,
color: Colors.blueAccent,
),
itemLabel: 'Page 2',
),

///svg item
BottomBarItem(
inActiveItem: SvgPicture.asset(
'assets/search_icon.svg',
color: Colors.blueGrey,
),
activeItem: SvgPicture.asset(
'assets/search_icon.svg',
color: Colors.black,
),
itemLabel: 'Page 3',
),
...
)
copied to clipboard
Remove margins
bottomNavigationBar: AnimatedNotchBottomBar(
...
removeMargins: true,
...
)
copied to clipboard
Set bottom bar width and height
bottomNavigationBar: AnimatedNotchBottomBar(
...
bottomBarWidth: 500.0,
bottomBarHeight: 62.0,
...
)
copied to clipboard
Add animation duration
bottomNavigationBar: AnimatedNotchBottomBar(
...
durationInMilliSeconds: 300,
...
)
copied to clipboard
Show/hide item label and style
bottomNavigationBar: AnimatedNotchBottomBar(
...
showLabel: true,
itemLabelStyle: TextStyle(
color: Colors.black,
fontSize: 16.0
),
...
)
copied to clipboard
Set Notch's color
bottomNavigationBar: AnimatedNotchBottomBar(
...
notchColor: Colors.black87,
...
)
copied to clipboard
Set Notch's gradient
bottomNavigationBar: AnimatedNotchBottomBar(
...
notchGradient: const LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Colors.red,
Colors.green,
],
),
...
)
copied to clipboard
Hide top and bottom corner radius
bottomNavigationBar: AnimatedNotchBottomBar(
...
showBottomRadius = false,
showTopRadius = false,
...
)
copied to clipboard
Customize elevation
bottomNavigationBar: AnimatedNotchBottomBar(
...
elevation = 2.0,
...
)
copied to clipboard
Customized Blur Effect (iOS Tab View)
bottomNavigationBar: AnimatedNotchBottomBar(
...
showBlurBottomBar: true,
blurOpacity: 0.2,
blurFilterX: 5.0,
blurFilterY: 10.0,
...
)
copied to clipboard
Migrating to 1.0.0+ #
Starting with version 1.0.0 of the package, NotchBottomBarController have been added for control the animation instead of PageController. The pageController field has been removed and notchBottomBarController is required now.
AnimatedNotchBottomBar #

notchBottomBarController - The controller which allows you to control the page.
bottomBarItems - Navigation items, required more than one item and less than six.
onTap - Required to listen when an item is tapped it provides the selected item's index.
color - The bottom bar's background color.
removeMargins - To remove side and bottom margins by default it's false.
bottomBarWidth - To provide width for web and desktop app.
durationInMilliSeconds - To set duration time in MilliSeconds.
showLabel: To show or hide the label under bottom bar item.
itemLabelStyle - The bottom bar's item text style.
showShadow - If false the bottom bar's elevation will be removed.
showBlurBottomBar - If true the bottom bar will look blur.
blurOpacity - To set opacity of blur effect.
blurFilterX - Creates an image filter that applies a Gaussian blur at x axis.
blurFilterY - Creates an image filter that applies a Gaussian blur at y axis.
notchColor - Customizable notch's color.
notchGradient - Add Gradient to notch.
showTopRadius - If set false the top corner radius will be removed.
showBottomRadius - If set false the top corner radius will be removed.
elevation - Set elevation of bottom bar.
bottomBarHeight - To set height of bottom bar.

BottomBarItems #

title - the bottom bar item label
activeItem - the selected item.
inActiveItem - the inactive item.

Guideline for contributors #
Contribution towards our repository is always welcome, we request contributors to create a pull request to the main branch only.
LICENSE! #
Animated Notch Bottom Bar is MIT-licensed.
Let us know! #
We’d be really happy if you send us links to your projects where you use our component. Just send an email to [email protected] and do let us know if you have any questions or suggestion regarding our work.