liquid_drop_nav_bar

A highly customizable Flutter bottom navigation bar featuring a smooth, organic liquid drop/metaball transition animation.

Features

• Organic Liquid Animation: Smooth, fluid metaball stretch and snap effects when transitioning between navigation tabs.
• Smart Hiding/Shrinking: Intelligently hides/shrinks the inactive icon/labels when traveling across tabs to keep the UI clean and clutter-free.
• Customization: Easily configure colors, height, capsule size, minimum pill width, and margins.
• Responsive Layouts: Designed to run cleanly across different screen dimensions without third-party layout dependencies.

Installation

Add liquid_drop_nav_bar to your pubspec.yaml dependencies:

dependencies:
  liquid_drop_nav_bar: ^0.0.1

Or run:

flutter pub add liquid_drop_nav_bar

Usage

import 'package:flutter/material.dart';
import 'package:liquid_drop_nav_bar/liquid_drop_nav_bar.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Active Index: $_currentIndex'),
      ),
      bottomNavigationBar: LiquidDropNavBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: const [
          LiquidDropNavBarItem(
            icon: Icons.home_outlined,
            activeIcon: Icons.home,
            label: 'Home',
          ),
          LiquidDropNavBarItem(
            icon: Icons.chat_bubble_outline,
            activeIcon: Icons.chat_bubble,
            label: 'Chats',
          ),
          LiquidDropNavBarItem(
            icon: Icons.person_outline,
            activeIcon: Icons.person,
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

Additional parameters