apptomate_custom_nav_bar 0.0.1

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

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