abimana_zanneta_nav 0.0.2

A modern glassmorphism bottom navigation bar package for Flutter with badges, custom icons, smooth animations, and flexible theming.

abimana_zanneta_nav

A modern and compact bottom navigation bar for Flutter. It supports glassmorphism, solid colors, gradients, active tab highlight, icon-only mode, icon with labels, badges, smooth animations, SafeArea handling, and a simple API that works with your own routing or state management.

Published on pub.dev: https://pub.dev/packages/abimana_zanneta_nav

Features

• Compact capsule navigation with SafeArea support
• Glassmorphism background with blur
• Solid color or gradient background
• Active item highlight
• Smooth tab change animation
• Badge count and custom badge widget
• Custom inactive and active icons
• Icon only, selected label only, or icon with labels
• Flexible colors, sizing, radius, margin, and padding
• Responsive layout for 3 to 5 items
• No external dependencies beyond Flutter

Getting Started

Add the package to your pubspec.yaml:

dependencies:
  abimana_zanneta_nav: ^0.0.2

Import it:

import 'package:abimana_zanneta_nav/abimana_zanneta_nav.dart';

Usage

Scaffold(
  body: pages[currentIndex],
  bottomNavigationBar: AbimanaZannetaNav(
    selectedIndex: currentIndex,
    onItemSelected: (index) {
      setState(() => currentIndex = index);
    },
    items: const [
      AbimanaZannetaNavItem(
        icon: Icon(Icons.chat_bubble_outline),
        activeIcon: Icon(Icons.chat_bubble),
        label: 'Obrolan',
        badgeCount: 4,
      ),
      AbimanaZannetaNavItem(
        icon: Icon(Icons.person_outline),
        activeIcon: Icon(Icons.person),
        label: 'Kontak',
      ),
      AbimanaZannetaNavItem(
        icon: Icon(Icons.settings_outlined),
        activeIcon: Icon(Icons.settings),
        label: 'Pengaturan',
      ),
      AbimanaZannetaNavItem(
        icon: Icon(Icons.account_circle_outlined),
        activeIcon: Icon(Icons.account_circle),
        label: 'Profil',
      ),
    ],
  ),
)

Custom Theme

Glass style:

AbimanaZannetaNav(
  selectedIndex: currentIndex,
  onItemSelected: (index) => setState(() => currentIndex = index),
  theme: const AbimanaZannetaNavTheme(
    backgroundColor: Color(0xCC142334),
    activeBackgroundColor: Color(0x331E9DFF),
    activeIconColor: Color(0xFF22A7FF),
    inactiveIconColor: Colors.white,
    blurSigma: 18,
  ),
  items: items,
)

Solid style:

AbimanaZannetaNav(
  selectedIndex: currentIndex,
  onItemSelected: (index) => setState(() => currentIndex = index),
  theme: const AbimanaZannetaNavTheme(
    blurSigma: 0,
    backgroundColor: Color(0xFF111827),
    activeBackgroundColor: Color(0xFF2563EB),
  ),
  items: items,
)

Gradient style:

AbimanaZannetaNav(
  selectedIndex: currentIndex,
  onItemSelected: (index) => setState(() => currentIndex = index),
  theme: const AbimanaZannetaNavTheme(
    backgroundGradient: LinearGradient(
      colors: [Color(0xCC111827), Color(0xCC1E3A8A)],
    ),
    activeBackgroundGradient: LinearGradient(
      colors: [Color(0xFF22A7FF), Color(0xFF6EE7F9)],
    ),
    activeIconColor: Colors.white,
    activeLabelColor: Colors.white,
  ),
  items: items,
)

Labels

Use labelBehavior to choose between icon plus text or icon only:

AbimanaZannetaNav(
  selectedIndex: currentIndex,
  onItemSelected: (index) => setState(() => currentIndex = index),
  labelBehavior: AbimanaZannetaNavLabelBehavior.none,
  items: items,
)

Available values:

• AbimanaZannetaNavLabelBehavior.always
• AbimanaZannetaNavLabelBehavior.selected
• AbimanaZannetaNavLabelBehavior.none

Active Indicator Animation

By default, the active capsule slides smoothly when the selected item changes:

AbimanaZannetaNav(
  selectedIndex: currentIndex,
  onItemSelected: (index) => setState(() => currentIndex = index),
  enableSlidingIndicator: true,
  items: items,
)

To use the simpler per-item active background animation:

AbimanaZannetaNav(
  selectedIndex: currentIndex,
  onItemSelected: (index) => setState(() => currentIndex = index),
  enableSlidingIndicator: false,
  items: items,
)

API

• AbimanaZannetaNav: the bottom navigation widget.
• AbimanaZannetaNavItem: item model for icons, labels, and badges.
• AbimanaZannetaNavTheme: visual configuration for colors, spacing, radius, blur, and animation.
• AbimanaZannetaNavLabelBehavior: controls label visibility.

License

MIT