Flutter Animated Bottom Navigation #

A highly customizable animated bottom navigation bar for Flutter with morphing icons, badge support, and smooth transitions.

Features #

✨ Morphing Icons: Smooth icon transitions with scale, rotation, and bounce animations
🎯 Badge Support: Customizable badges with count display and styling
🎨 Highly Customizable: Extensive styling options for colors, animations, and layout
⚡ Smooth Animations: Configurable animation duration and curves
📱 Haptic Feedback: Optional haptic feedback on item selection
🔧 Easy to Use: Simple API with convenient factory methods

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_animated_bottom_nav: ^0.0.3

Quick Start #

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  final List<NavItem> _navItems = [
    NavItemExtension.home(badgeCount: 3),
    NavItemExtension.search(),
    NavItemExtension.notifications(badgeCount: 12),
    NavItemExtension.profile(),
    NavItemExtension.settings(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _selectedIndex,
        children: [
          HomePage(),
          SearchPage(),
          NotificationsPage(),
          ProfilePage(),
          SettingsPage(),
        ],
      ),
      bottomNavigationBar: AnimatedBottomNav(
        items: _navItems,
        selectedIndex: _selectedIndex,
        onItemSelected: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
      ),
    );
  }
}

Usage #

Basic Usage #

AnimatedBottomNav(
  items: [
    NavItem(
      icon: Icons.home,
      label: 'Home',
    ),
    NavItem(
      icon: Icons.search,
      label: 'Search',
    ),
  ],
  selectedIndex: 0,
  onItemSelected: (index) {
    // Handle item selection
  },
)

With Badges #

AnimatedBottomNav(
  items: [
    NavItem(
      icon: Icons.home,
      label: 'Home',
      badgeCount: 3,
      badgeStyle: BadgeStyle(
        backgroundColor: Colors.red,
        textColor: Colors.white,
      ),
    ),
    NavItem(
      icon: Icons.notifications,
      label: 'Notifications',
      badgeCount: 12,
      badgeStyle: BadgeStyle(
        backgroundColor: Colors.orange,
        textColor: Colors.white,
        showZero: true,
      ),
    ),
  ],
  selectedIndex: 0,
  onItemSelected: (index) {
    // Handle item selection
  },
)

Custom Styling #

AnimatedBottomNav(
  items: _navItems,
  selectedIndex: _selectedIndex,
  onItemSelected: (index) {
    setState(() {
      _selectedIndex = index;
    });
  },
  style: NavStyle(
    backgroundColor: Colors.white,
    selectedColor: Colors.blue,
    unselectedColor: Colors.grey,
    selectedItemBackgroundColor: Color(0xFFE3F2FD),
    height: 80,
    elevation: 8,
    borderRadius: BorderRadius.circular(20),
    animationDuration: Duration(milliseconds: 300),
    animationCurve: Curves.easeInOut,
    showLabels: true,
    showSelectedItemBackground: true,
    iconSize: 24,
    labelFontSize: 12,
    labelFontWeight: FontWeight.w500,
  ),
)

Using Factory Methods #

final List<NavItem> _navItems = [
  NavItemExtension.home(
    badgeCount: 3,
    badgeStyle: BadgeStyle(
      backgroundColor: Colors.red,
      textColor: Colors.white,
    ),
  ),
  NavItemExtension.search(),
  NavItemExtension.notifications(
    badgeCount: 12,
    badgeStyle: BadgeStyle(
      backgroundColor: Colors.orange,
      textColor: Colors.white,
      showZero: true,
    ),
  ),
  NavItemExtension.profile(),
  NavItemExtension.settings(),
];

API Reference #

AnimatedBottomNav #

NavItem #

NavStyle #

BadgeStyle #

Factory Methods #

The package provides convenient factory methods for common navigation items:

• NavItemExtension.home() - Home icon
• NavItemExtension.search() - Search icon
• NavItemExtension.notifications() - Notifications icon
• NavItemExtension.profile() - Profile icon
• NavItemExtension.settings() - Settings icon

Each factory method accepts optional parameters for customization:

NavItemExtension.home(
  label: 'Dashboard',
  badgeCount: 5,
  badgeStyle: BadgeStyle(backgroundColor: Colors.red),
  selectedColor: Colors.blue,
  unselectedColor: Colors.grey,
  onTap: () => print('Home tapped'),
)

Examples #

Check out the example/ directory for a complete working example that demonstrates:

• Basic usage
• Badge support
• Custom styling
• Factory methods
• Multiple pages with IndexedStack

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

License #

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