### Install floating_bottom_navigation_bar

Source: https://context7.com/right7ctrl/flutter_floating_bottom_navigation_bar/llms.txt

Add the package dependency to your pubspec.yaml file.

```yaml
dependencies:
  floating_bottom_navigation_bar: ^1.5.2
```

--------------------------------

### FloatingNavbarItem Examples

Source: https://context7.com/right7ctrl/flutter_floating_bottom_navigation_bar/llms.txt

Shows how to create different types of navigation items for the FloatingNavbar, including items with icons and titles, icon-only items, items with custom widgets, and items with badges.

```dart
FloatingNavbarItem(
  icon: Icons.home,
  title: 'Home',
)
```

```dart
FloatingNavbarItem(
  icon: Icons.search,
  title: null,
)
```

```dart
FloatingNavbarItem(
  customWidget: Container(
    width: 24,
    height: 24,
    child: Image.asset('assets/custom_icon.png'),
  ),
  title: 'Custom',
)
```

```dart
FloatingNavbarItem(
  customWidget: Stack(
    children: [
      Icon(Icons.notifications, size: 24),
      Positioned(
        right: 0,
        top: 0,
        child: Container(
          padding: EdgeInsets.all(2),
          decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(6),
          ),
          constraints: BoxConstraints(minWidth: 12, minHeight: 12),
          child: Text('3', style: TextStyle(color: Colors.white, fontSize: 8)),
        ),
      ),
    ],
  ),
  title: 'Alerts',
)
```

--------------------------------

### Page Navigation with IndexedStack

Source: https://context7.com/right7ctrl/flutter_floating_bottom_navigation_bar/llms.txt

This example shows how to use IndexedStack to manage different screens and preserve their state when navigating via the FloatingNavbar. Ensure `extendBody: true` is set on the Scaffold for the floating effect.

```dart
import 'package:floating_bottom_navigation_bar/floating_bottom_navigation_bar.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Floating NavBar Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MainScreen(),
    );
  }
}

class MainScreen extends StatefulWidget {
  @override
  _MainScreenState createState() => _MainScreenState();
}

class _MainScreenState extends State<MainScreen> {
  int _currentIndex = 0;

  final List<Widget> _screens = [
    HomePage(),
    ExplorePage(),
    MessagesPage(),
    SettingsPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      body: IndexedStack(
        index: _currentIndex,
        children: _screens,
      ),
      bottomNavigationBar: FloatingNavbar(
        onTap: (int index) {
          setState(() => _currentIndex = index);
        },
        currentIndex: _currentIndex,
        backgroundColor: Colors.blueGrey[900]!,
        selectedBackgroundColor: Colors.tealAccent,
        selectedItemColor: Colors.blueGrey[900],
        unselectedItemColor: Colors.white70,
        items: [
          FloatingNavbarItem(icon: Icons.home, title: 'Home'),
          FloatingNavbarItem(icon: Icons.explore, title: 'Explore'),
          FloatingNavbarItem(icon: Icons.message, title: 'Messages'),
          FloatingNavbarItem(icon: Icons.settings, title: 'Settings'),
        ],
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home')),
      body: ListView.builder(
        padding: EdgeInsets.only(bottom: 80), // Space for floating navbar
        itemCount: 20,
        itemBuilder: (context, index) => ListTile(title: Text('Item $index')),
      ),
    );
  }
}

class ExplorePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Explore')),
      body: Center(child: Text('Explore Content')),
    );
  }
}

class MessagesPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Messages')),
      body: Center(child: Text('Messages Content')),
    );
  }
}

class SettingsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Settings')),
      body: Center(child: Text('Settings Content')),
    );
  }
}

```

--------------------------------

### Custom Styled Floating Navigation Bar

Source: https://context7.com/right7ctrl/flutter_floating_bottom_navigation_bar/llms.txt

An example of a fully customized floating navigation bar with specific background colors, selected item colors, border radius, and icon sizes to match an app's theme. Requires importing `floating_bottom_navigation_bar.dart` and `flutter/material.dart`.

```dart
import 'package:floating_bottom_navigation_bar/floating_bottom_navigation_bar.dart';
import 'package:flutter/material.dart';

class CustomStyledNavBar extends StatefulWidget {
  @override
  _CustomStyledNavBarState createState() => _CustomStyledNavBarState();
}

class _CustomStyledNavBarState extends State<CustomStyledNavBar> {
  int _selectedIndex = 0;

  final List<Widget> _pages = [
    Center(child: Text('Home Page')),
    Center(child: Text('Search Page')),
    Center(child: Text('Favorites Page')),
    Center(child: Text('Profile Page')),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      body: _pages[_selectedIndex],
      bottomNavigationBar: FloatingNavbar(
        onTap: (index) => setState(() => _selectedIndex = index),
        currentIndex: _selectedIndex,
        backgroundColor: Color(0xFF1E1E2C),
        selectedBackgroundColor: Color(0xFF6C63FF),
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.grey[400],
        borderRadius: 24,
        itemBorderRadius: 16,
        iconSize: 28,
        fontSize: 12,
        margin: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        padding: EdgeInsets.symmetric(vertical: 12),
        elevation: 8,
        items: [
          FloatingNavbarItem(icon: Icons.home_rounded, title: 'Home'),
          FloatingNavbarItem(icon: Icons.search_rounded, title: 'Search'),
          FloatingNavbarItem(icon: Icons.favorite_rounded, title: 'Favorites'),
          FloatingNavbarItem(icon: Icons.person_rounded, title: 'Profile'),
        ],
      ),
    );
  }
}
```

--------------------------------

### Import package

Source: https://context7.com/right7ctrl/flutter_floating_bottom_navigation_bar/llms.txt

Import the library into your Dart file.

```dart
import 'package:floating_bottom_navigation_bar/floating_bottom_navigation_bar.dart';
```

--------------------------------

### Custom Item Builder for FloatingNavbar

Source: https://context7.com/right7ctrl/flutter_floating_bottom_navigation_bar/llms.txt

Demonstrates how to use the `itemBuilder` property to completely customize the rendering of navigation items within the FloatingNavbar. This allows for unique designs and interactive elements.

```dart
FloatingNavbar(
  items: [
    FloatingNavbarItem(icon: Icons.home, title: 'Home'),
    FloatingNavbarItem(icon: Icons.explore, title: 'Explore'),
    FloatingNavbarItem(icon: Icons.settings, title: 'Settings'),
  ],
  currentIndex: _currentIndex,
  onTap: (int index) => setState(() => _currentIndex = index),
  itemBuilder: (BuildContext context, int index, FloatingNavbarItem item) {
    final isSelected = index == _currentIndex;
    return Expanded(
      child: GestureDetector(
        onTap: () => setState(() => _currentIndex = index),
        child: AnimatedContainer(
          duration: Duration(milliseconds: 200),
          margin: EdgeInsets.symmetric(horizontal: 4),
          padding: EdgeInsets.symmetric(vertical: 8, horizontal: 12),
          decoration: BoxDecoration(
            color: isSelected ? Colors.blueAccent : Colors.transparent,
            borderRadius: BorderRadius.circular(16),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(
                item.icon,
                color: isSelected ? Colors.white : Colors.grey,
                size: 20,
              ),
              if (isSelected && item.title != null) ...[
                SizedBox(width: 8),
                Text(
                  item.title!,
                  style: TextStyle(color: Colors.white, fontSize: 12),
                ),
              ],
            ],
          ),
        ),
      ),
    );
  },
)
```

--------------------------------

### Customize FloatingNavbar properties

Source: https://context7.com/right7ctrl/flutter_floating_bottom_navigation_bar/llms.txt

Configure the appearance of the navigation bar using various styling properties.

```dart
FloatingNavbar(
  // Required properties
  items: [
    FloatingNavbarItem(icon: Icons.home, title: 'Home'),
    FloatingNavbarItem(icon: Icons.search, title: 'Search'),
    FloatingNavbarItem(icon: Icons.person, title: 'Profile'),
  ],
  currentIndex: _currentIndex,
  onTap: (int index) => setState(() => _currentIndex = index),

  // Color customization
  backgroundColor: Colors.black,              // Navbar background color (default: Colors.black)
  selectedBackgroundColor: Colors.white,      // Selected item background (default: Colors.white)
  selectedItemColor: Colors.black,            // Selected icon/text color (default: Colors.black)
  unselectedItemColor: Colors.white,          // Unselected icon/text color (default: Colors.white)

  // Size customization
  iconSize: 24.0,                             // Icon size (default: 24.0)
  fontSize: 11.0,                             // Title font size (default: 11.0)
  width: double.infinity,                     // Navbar width (default: double.infinity, must be > 50)

  // Border radius customization
  borderRadius: 8,                            // Navbar border radius (default: 8)
  itemBorderRadius: 8,                        // Individual item border radius (default: 8)

  // Spacing customization
  margin: EdgeInsets.all(8),                  // Outer margin (default: EdgeInsets.all(8))
  padding: EdgeInsets.symmetric(vertical: 8), // Inner padding (default: EdgeInsets.symmetric(vertical: 8))

  // Elevation
  elevation: 0.0,                             // Shadow elevation (default: 0.0)
)
```

--------------------------------

### Implement FloatingNavbar in Scaffold

Source: https://github.com/right7ctrl/flutter_floating_bottom_navigation_bar/blob/master/README.md

Integrate the FloatingNavbar within a Scaffold widget. Ensure extendBody is set to true to allow the body content to render behind the navigation bar.

```dart
    Scaffold(
          appBar: AppBar(
            title: Text('Example'),
          ),
          //If you want to show body behind the navbar, it should be true
          extendBody: true,
          bottomNavigationBar: FloatingNavbar(
            onTap: (int val) {
              //returns tab id which is user tapped
            },
            currentIndex: 0,
            items: [
              FloatingNavbarItem(icon: Icons.home, title: 'Home'),
              FloatingNavbarItem(icon: Icons.explore, title: 'Explore'),
              FloatingNavbarItem(icon: Icons.chat_bubble_outline, title: 'Chats'),
              FloatingNavbarItem(icon: Icons.settings, title: 'Settings'),
            ],
          ),
          
        );
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.