🚀 floating_bottom_nav_bar

A highly customizable floating bottom navigation bar for Flutter, with smooth animations, modern UI styling, SVG icon support, and badge indicators. Perfect for building sleek mobile apps with an intuitive bottom navigation experience.

🎬 Demo

✨ Features

• Fully customizable floating navigation bar
• Smooth animated transitions
• Support for SVG icons
• Badge indicators for notifications
• Modern Material Design style
• Easy integration with Flutter apps

⚡ Getting Started

Add the package to your pubspec.yaml:

dependencies:
  floating_bottom_nav_bar: ^1.0.0

Then run:

flutter pub get

🛠 Usage Example

import 'package:floating_bottom_nav_bar/floating_bottom_nav_bar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: FloatingBottomNavBar(
        items: [
          FloatingNavBarItem(
            icon: SvgPicture.asset('assets/icons/icon1.svg'),
            label: 'Home',
          ),
          FloatingNavBarItem(
            icon: SvgPicture.asset('assets/icons/icon2.svg'),
            label: 'Search',
          ),
          FloatingNavBarItem(
            icon: SvgPicture.asset('assets/icons/icon3.svg'),
            label: 'Favorites',
            badgeCount: 3,
          ),
        ],
        selectedIndex: 0,
        onTap: (index) {
          // Handle navigation tap
        },
      ),
      body: Center(child: Text('Hello Flutter!')),
    );
  }
}

📦 Installation

Add floating_bottom_nav_bar to your pubspec.yaml

Run flutter pub get

Import in your Dart file:

import 'package:floating_bottom_nav_bar/floating_bottom_nav_bar.dart'; 🔗 Resources Flutter Documentation

SVG support in Flutter

Material Design Guidelines

📄 License MIT License. See LICENSE for details.