persistent_bottom_nav_bar_v2_style_4_upgraded 0.0.1

A highly customizable bottom navigation bar for Flutter. Includes 17 prebuilt styles but can also be used with your custom style. Style 4 Upgraded Version."

An Enhanced Style 4 Bottom Navigation Bar with Center Widget Support

Based on persistent_bottom_nav_bar_v2 with exclusive focus on Style 4

Getting Started • Documentation • Examples • Features

---

✨ What's New in Style 4 Upgraded

• 🎯 Center Widget Support - Add a floating action button or custom widget in the center
• 🎨 Direct Styling - Pass styling properties directly to the navigation bar
• 🔄 Animated Border Radius - Customize the border animation
• 🎭 Enhanced Foreground Colors - Direct control over active and inactive colors
• 📝 Improved Text Styling - Direct text style customization

🚀 Quick Start

1. Add Dependency

dependencies:
  persistent_bottom_nav_bar_v2_style_4_upgraded: ^1.0.0

2. Import Package

import 'package:persistent_bottom_nav_bar_v2_style_4_upgraded/persistent_bottom_nav_bar_v2_style_4_upgraded.dart';

3. Basic Implementation

PersistentTabView(
  tabs: [
    PersistentTabConfig(
      screen: HomeScreen(),
      item: ItemConfig(
        icon: Icon(Icons.home),
        title: "Home",
      ),
    ),
    PersistentTabConfig(
      screen: ProfileScreen(),
      item: ItemConfig(
        icon: Icon(Icons.person),
        title: "Profile",
      ),
    ),
  ],
  centerWidget: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  navBarBuilder: (navBarConfig) => Style4BottomNavBar(
    navBarConfig: navBarConfig,
    animatedBorderRadius: BorderRadius.circular(20),
    activeForegroundColor: Colors.blue,
    inactiveForegroundColor: Colors.grey,
    textStyle: TextStyle(fontSize: 12),
  ),
)

🎨 Style 4 Customization

Style4BottomNavBar(
  navBarConfig: navBarConfig,
  // Center Widget Options
  centerWidget: YourCustomWidget(),
  
  // Styling
  animatedBorderRadius: BorderRadius.circular(20),
  activeForegroundColor: Colors.blue,
  inactiveForegroundColor: Colors.grey,
  textStyle: TextStyle(
    fontSize: 12,
    fontWeight: FontWeight.bold,
  ),
  
  // Navigation Bar Decoration
  navBarDecoration: NavBarDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.black12,
        blurRadius: 10,
      ),
    ],
  ),
)

💡 Pro Tips

1. Center Widget:

   // Adjust center widget position
   centerWidget: CustomWidget(), // Moves widget up
   

2. Animated Border Control:

   // Custom border animation
   animatedBorderRadius: BorderRadius.circular(30),
   

3. Direct Styling:

   // Pass styles directly to nav bar
   activeForegroundColor: Colors.blue,
   inactiveForegroundColor: Colors.grey,
   textStyle: TextStyle(fontSize: 14),
   

🔄 Migration from persistent_bottom_nav_bar_v2

If you're migrating from the original package, the main differences are:

1. Change import statement to use the new package
2. Update package name in pubspec.yaml
3. Add center widget support in Style4BottomNavBar
4. Use direct styling properties instead of ItemConfig

// Old way
ItemConfig(
  activeForegroundColor: Colors.blue,
  inactiveForegroundColor: Colors.grey,
)

// New way
Style4BottomNavBar(
  activeForegroundColor: Colors.blue,
  inactiveForegroundColor: Colors.grey,
)

🤝 Support

Made with ❤️ by talhasahidev

📄 License

<<<<<<< HEAD This project is licensed under the GUI License.

This project is licensed under the GUI License.

93833694eebde36c3896e424aa8d6ba86ca0c981