advance_water_drop_nav_bar #

It is advance flutter plugin for navigation which is inherit from water_drop_nav_bar

Installation #

To use Material Text Field in your Dart project, add the following dependency to your "pubspec.yaml" file

dependencies:
advance_water_drop_nav_bar: ^<latest-version>

Then run flutter pub get to install the package.

In your library add the following import

import 'package:advance_water_drop_nav_bar/advance_water_drop_nav_bar.dart';

Design Credit #

Animated Tabbar by Cuberto

Video Credit #

Deepu

API Reference #

barItems → List<BarItem>

• 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

Usage #

BarItem with default textStyle

  BarItem(
      filledIcon: Icons.account_balance_wallet,
      outlinedIcon: Icons.account_balance_wallet_outlined,
      text: 'Wallet'),

Advance Usage #

BarItem with custom textStyle

     BarItem(
  filledIcon: Icons.account_balance_wallet,
  outlinedIcon: Icons.account_balance_wallet_outlined,
  text: 'Wallet', textStyle:TextStyle(color: Colors.red,fontWeight: FontWeight.bold,fontStyle: FontStyle.italic),
  ),

Example

 int _selectedIndex = 0;

Widget buildPages() {
  switch (_selectedIndex) {
    case 1:
      return MarketScreen();
    case 2:
      return Orders();

    case 3:
      return WalletPage();
    case 0:
    default:
      return HomePage();
  }
}

@override
Widget build(BuildContext context) {
  return  Scaffold(
    body: buildPages(),
    bottomNavigationBar: WaterDropNavBar(
      backgroundColor: Colors.white,
      inactiveIconColor:Colors.blue,
      waterDropColor: Colors.blue,
      onItemSelected: (int index) {
        setState(() {
          _selectedIndex = index;
        });
      },
      selectedIndex: _selectedIndex,
      barItems: <BarItem>[
        BarItem(
            filledIcon: Icons.home_filled,
            outlinedIcon: Icons.home_outlined,
            text: 'Home'),
        BarItem(
            filledIcon: Icons.data_exploration,
            outlinedIcon: Icons.data_exploration_outlined,
            text: 'Market'),
        BarItem(
            filledIcon: Icons.swap_horizontal_circle,
            outlinedIcon: Icons.swap_horizontal_circle_outlined,
            text: 'Order'),
        BarItem(
            filledIcon: Icons.account_balance_wallet,
            outlinedIcon: Icons.account_balance_wallet_outlined,
            text: 'Wallet'),
      ],
    ),
  );
}

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.

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.

  ClipRRect(
      borderRadius: const BorderRadius.vertical(
        top: Radius.circular(16),
      ),
      child: WaterDropNavBar(
    )