CustomBottomNavigationBar

An enhanced and fully customizable bottom navigation bar for Flutter applications.

Features

  • Custom Icons & Labels: Support for both regular and active icons
  • Flexible Styling: Full control over colors, sizes, and typography
  • Responsive Design: Works across all screen sizes and orientations
  • Smooth Animations: Built-in transition effects
  • Type Options: Supports both fixed and shifting navigation types
  • Tooltip Support: Additional accessibility hints
  • Demo Included: Example implementation showcasing all features

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_nav_bar: ^0.0.1

Usage

Basic Usage

Scaffold(
  bottomNavigationBar: CustomBottomNavigationBar(
    currentIndex: _selectedIndex,
    onTap: (index) => setState(() => _selectedIndex = index),
    items: [
      BottomNavItem(icon: Icons.home, label: 'Home'),
      BottomNavItem(icon: Icons.search, label: 'Search'),
    ],
  ),
  body: // Your content...
)

Available Parameters

Parameter Type Default Description
currentIndex int required Currently selected index
items List required Navigation items
onTap ValueChanged required Selection callback
backgroundColor Color Colors.white Background color
selectedItemColor Color Colors.blue Selected item color
unselectedItemColor Color Colors.grey Unselected item color
elevation double 8.0 Shadow elevation
iconSize double 24.0 Icon size
selectedFontSize double? 14.0 Selected label font size
unselectedFontSize double? 12.0 Unselected label font size
showSelectedLabels bool true Show selected labels
showUnselectedLabels bool true Show unselected labels
type BottomNavigationBarType? null Fixed or shifting type
animationDuration Duration? null Animation duration
animationCurve Curve? null Animation curve

BottomNavItem Properties

Property Type Description
icon IconData Required icon
label String Required label
activeIcon Widget? Optional active state icon
tooltip String? Accessibility tooltip

Advanced Examples

Custom colored navigation:

CustomBottomNavigationBar(
  backgroundColor: Colors.grey[100],
  selectedItemColor: Colors.purple,
  unselectedItemColor: Colors.grey,
  // ... other params
)

Large icons with hidden labels:

CustomBottomNavigationBar(
  iconSize: 32.0,
  showUnselectedLabels: false,
  // ... other params
)

Demo

The package includes a CustomBottomNavigationBarWidget demo that shows:

  • Four navigation items
  • Different active/inactive states
  • Custom styling options
  • Page switching functionality

To run the demo:

void main() {
  runApp(MaterialApp(
    home: CustomBottomNavigationBarWidget(),
  ));
}

Implementation Details

The widget:

  1. Wraps Flutter's core BottomNavigationBar
  2. Provides a cleaner API through BottomNavItem class
  3. Handles all styling and theming options
  4. Manages state changes automatically
  5. Includes proper type safety and documentation

Best Practices

  1. Limit to 3-5 navigation items
  2. Use consistent icon and label styles
  3. Consider accessibility (tooltips, contrast)
  4. Test on both iOS and Android
  5. Use meaningful labels for each item

Comparison with Flutter's BottomNavigationBar

Feature Flutter's Version Custom Version
API Clarity Basic Enhanced
Customization Limited Extensive
Active Icons Manual Built-in
Tooltips Manual Built-in
Type Safety Basic Improved
Documentation Standard Enhanced

Common Use Cases

  • Main app navigation
  • Section switching
  • Tabbed interfaces
  • Multi-feature apps
  • Dashboard navigation
  • Content filtering

Libraries

apptomate_custom_nav_bar