cmx_capsule_nav #

A premium, custom animated floating capsule-style navigation bar for Flutter. Designed for modern apps that crave a unique, fluid, and interactive navigation experience.

Why cmx_capsule_nav? #

Unlike traditional bottom navigation bars, cmx_capsule_nav features a dynamic morphing animation. When you switch between items, the active bubble fluidly expands or contracts, creating a "capsule" effect that feels alive and responsive.

Features #

• 🚀 Fluid Morphing: Smooth animations that transition between active and inactive states.
• 🎨 Fully Customizable: Control every aspect—colors, icons, shadows, animation curves, and durations.
• 📱 Floating Design: A modern, elevated look that stands out from standard UI components.
• 🛠️ Easy Integration: Built to work seamlessly with Flutter's ThemeData and standard IconData.
• 📏 Responsive Layout: Automatically adjusts its width based on the number of items and your constraints.

Installation #

Add the dependency to your pubspec.yaml:

dependencies:
  cmx_capsule_nav: ^0.0.2

Then run:

flutter pub get

Usage #

Using CmxCapsuleNav is as simple as providing a list of items and a callback:

import 'package:cmx_capsule_nav/cmx_capsule_nav.dart';

CmxCapsuleNav(
  currentIndex: _selectedIndex,
  items: [
    CmxCapsuleNavItem(icon: Icons.home_outlined),
    CmxCapsuleNavItem(icon: Icons.chat_bubble_outline),
    CmxCapsuleNavItem(icon: Icons.person_outline),
  ],
  onTap: (index) {
    setState(() {
      _selectedIndex = index;
    });
  },
  theme: CmxCapsuleNavTheme.defaultTheme(context),
)

Customization #

You can fully customize the navigation bar using the CmxCapsuleNavTheme class. You can either use the defaultTheme factory or create your own:

CmxCapsuleNav(
  // ... other properties
  theme: CmxCapsuleNavTheme(
    activeColor: Colors.deepPurple,
    inactiveColor: Colors.deepPurple.withValues(alpha: 0.2),
    activeIconColor: Colors.white,
    inactiveIconColor: Colors.deepPurple,
    animationDuration: const Duration(milliseconds: 800),
    animationCurve: Curves.elasticOut,
    barHeight: 90.0,
    bubbleHeight: 70.0,
    activeWidth: 70.0,
    maxWidth: 250.0,
  ),
)

Theme Parameters #

License #

This project is licensed under the MIT License - see the LICENSE file for details.