Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Mindinventory/animated_notch_bottom_bar
Tabbar component for Flutter
https://github.com/Mindinventory/animated_notch_bottom_bar
animatedtabbar flutter tabbar tabbar-notch
Last synced: 4 days ago
JSON representation
Tabbar component for Flutter
- Host: GitHub
- URL: https://github.com/Mindinventory/animated_notch_bottom_bar
- Owner: Mindinventory
- License: mit
- Created: 2022-09-14T09:14:22.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-16T05:38:00.000Z (about 2 months ago)
- Last Synced: 2024-09-16T06:55:04.800Z (about 2 months ago)
- Topics: animatedtabbar, flutter, tabbar, tabbar-notch
- Language: Dart
- Homepage:
- Size: 302 KB
- Stars: 105
- Watchers: 6
- Forks: 32
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
A Flutter package for animating the position of selected item in bottomNavigationBar with notch like design. Inspired by [react-native-tabbar-interaction](https://github.com/Mindinventory/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`:
```yaml
dependencies:
...
animated_notch_bottom_bar: ^1.0.0
```
## Basic Usage
Place `AnimatedNotchBottomBar` in the bottomNavigationBar parameter of a `Scaffold` widget and provide `NotchBottomBarController` to `AnimatedNotchBottomBar`.
```dart
bottomNavigationBar: AnimatedNotchBottomBar(
notchBottomBarController: _controller,
...
)
```
##### Use any `Widget` as bottom bar item
You can also set any animated widget.
```dart
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',
),
...
)
```
##### Remove margins
```dart
bottomNavigationBar: AnimatedNotchBottomBar(
...
removeMargins: true,
...
)
```
##### Set bottom bar width and height
```dart
bottomNavigationBar: AnimatedNotchBottomBar(
...
bottomBarWidth: 500.0,
bottomBarHeight: 62.0,
...
)
```
##### Add animation duration
```dart
bottomNavigationBar: AnimatedNotchBottomBar(
...
durationInMilliSeconds: 300,
...
)
```
##### Show/hide item label and style
```dart
bottomNavigationBar: AnimatedNotchBottomBar(
...
showLabel: true,
itemLabelStyle: TextStyle(
color: Colors.black,
fontSize: 16.0
),
...
)
```
##### Set Notch's color
```dart
bottomNavigationBar: AnimatedNotchBottomBar(
...
notchColor: Colors.black87,
...
)
```
##### Set Notch's gradient
```dart
bottomNavigationBar: AnimatedNotchBottomBar(
...
notchGradient: const LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
colors: [
Colors.red,
Colors.green,
],
),
...
)
```
##### Hide top and bottom corner radius
```dart
bottomNavigationBar: AnimatedNotchBottomBar(
...
showBottomRadius = false,
showTopRadius = false,
...
)
```
##### Customize elevation
```dart
bottomNavigationBar: AnimatedNotchBottomBar(
...
elevation = 2.0,
...
)
```
##### Customized Blur Effect (iOS Tab View)
```dart
bottomNavigationBar: AnimatedNotchBottomBar(
...
showBlurBottomBar: true,
blurOpacity: 0.2,
blurFilterX: 5.0,
blurFilterY: 10.0,
...
)
```
### 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](https://github.com/Mindinventory/animated_notch_bottom_bar/blob/main/LICENSE "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.
