https://github.com/watery-desert/water_drop_nav_bar
flutter navigation bar with water drop effect.
https://github.com/watery-desert/water_drop_nav_bar
flutter flutter-package
Last synced: about 2 months ago
JSON representation
flutter navigation bar with water drop effect.
- Host: GitHub
- URL: https://github.com/watery-desert/water_drop_nav_bar
- Owner: watery-desert
- License: bsd-3-clause
- Created: 2021-06-30T09:44:45.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-07-11T19:24:26.000Z (over 1 year ago)
- Last Synced: 2025-01-07T19:11:57.215Z (11 months ago)
- Topics: flutter, flutter-package
- Language: Dart
- Homepage:
- Size: 144 KB
- Stars: 51
- Watchers: 1
- Forks: 19
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.youtube.com/waterydesert)
[](https://twitter.com/watery_desert)
[](https://www.patreon.com/watery_desert)
[](https://pub.dev/packages/water_drop_nav_bar)
[](https://waterydesert.com)
## Design Credit & screen recording
[Animated Tabbar by Cuberto](https://dribbble.com/shots/14723171-Animated-Tabbar)
## How to use?
#### Installation
Add `water_drop_nav_bar:` to your `pubspec.yaml` dependencies then run `flutter pub get`
```yaml
dependencies:
water_drop_nav_bar:
```
#### Import
Add this line to import the package.
```dart
import 'package:water_drop_nav_bar/water_drop_nav_bar.dart';
```
Add `WaterDropNavBar()` as `bottomNavigationBar` of `Scaffold()` and body would be `PageView()` with `NeverScrollableScrollPhysics()` don't try to upate the seleted index from `onPageChanged` or will see some weird behaviour. Insted of `PageView()` You can use `Stack()` or [AnimatedSwitcher](https://api.flutter.dev/flutter/widgets/AnimatedSwitcher-class.html) for custom page transition animation.
API Reference
barItems → `List`
- List of bar items that shows horizontally, Minimum 2 and maximum 4 items.\
*required*
onItemSelected → `OnButtonPressCallback`
- Callback When individual barItem is pressed.\
*required*
selectedIndex → `int`
- Current selected index of the bar item.\
*required*
backgroundColor → `Color`
- Background Color of the bar.\
*optional [Colors.white]*
waterDropColor → `Color`
- Color of water drop which is also the active icon color.\
*optional [Color(0xFF5B75F0)]*
inactiveIconColor → `Color`
- Inactive icon color by default it will use water drop color.\
*optional [waterDropColor]*
iconSize → `double`
- Each active & inactive icon size, default value is 28 don't make it too big or small.\
*optional [28]*
bottomPadding → `double`
- Additional padding at the bottom of the bar. If nothing is provided the it will use
[MediaQuery.of(context).padding.bottom] value.\
*optional*
### Do and don't
- Don't make icon size too big.
- Use complementary filled and outlined icons for best result.
- `backgroundColor` and `waterDropColor` of `WaterDropNavBar()` and `Scaffold()`'s `backgroundColor` (or whatever widget you are using) must be different (see the example app) This will visualize that the water drop is hanging from the top.
#### Short example
```dart
return Scaffold(
body: PageView(
physics: NeverScrollableScrollPhysics(),
controller: pageController,
...
),
bottomNavigationBar: WaterDropNavBar(
backgroundColor: Colors.white,
onItemSelected: (index) {
setState(() {
selectedIndex = index;
});
pageController.animateToPage(selectedIndex,
duration: const Duration(milliseconds: 400),
curve: Curves.easeOutQuad);
},
selectedIndex: selectedIndex,
barItems: [
BarItem(
filledIcon: Icons.bookmark_rounded,
outlinedIcon: Icons.bookmark_border_rounded,
),
BarItem(
filledIcon: Icons.favorite_rounded,
outlinedIcon: Icons.favorite_border_rounded),
],
),
);
```
## Issues ❗️
#### Android
Some android phones might have black navigation bar, this looks ugly. It's recommended to wrap `Scaffold` with `AnnotatedRegion` to change that black navigation bar color to `WaterDropNavBar` `backgroundColor`. Check the example app. Like this 👇
```dart
return AnnotatedRegion(
value: const SystemUiOverlayStyle(
//this color must be equal to the WaterDropNavBar backgroundColor
systemNavigationBarColor: Colors.white,
systemNavigationBarIconBrightness: Brightness.dark,
),
child: Scaffold(
body: // code here
)
);
```
result 👇
You can additionally provide some `bottomPadding` to add padding at the bottom of the bar, I think 8 is enough.
#### iPhone
iPhones without swipe home gesture might have such issue where icons are pushed to the bottom. Provide some `bottomPadding`. I added 8 padding here.
result 👇
Now you might ask how do you know which phone is using swipe home gesture?
Well, you can check bottom padding (using `MediaQuery.of(context).padding.bottom`) and if it's less than 34 or something then provide some bottom padding. Definitely try running different simulators and see.
## FAQ
- #### How do I change the height?
The height must be constant because the animation is in vertical direction. According to me 60 is perfect. But if you think needs to be reduced then please create an issue with a screenshot. I will see if I can do something.
- #### How do I add drop shadow?
Wrap `WaterDropNavBar` with `DecoratedBox` or `Container` and pass `BoxDecoration` to `decoration` property. `BoxDecoration` takes list of `boxShadow` there you can pass your drop shadow.
``` dart
DecoratedBox(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.2),
offset: Offset(0, 4),
blurRadius: 8.0)
],
),
child: WaterDropNavBar()
)
```
- #### How do I change the corner radius of the navigation bar?
Wrap `WaterDropNavBar` with ClipRRect and pass `BorderRadius` to `borderRadius` property.
``` dart
ClipRRect(
borderRadius: const BorderRadius.vertical(
top: Radius.circular(16),
),
child: WaterDropNavBar(
)
```
All flutter packages
● [Sliding Clipped Nav Bar](https://github.com/watery-desert/sliding_clipped_nav_bar)\
➜ [Water Drop Nav Bar](https://github.com/watery-desert/water_drop_nav_bar)\
● [Swipeable Tile](https://github.com/watery-desert/swipeable_tile)\
● [Loading Animation Widget](https://github.com/watery-desert/loading_animation_widget)