Skip to main content

floating_bottom_nav_bar 1.0.1 copy "floating_bottom_nav_bar: ^1.0.1" to clipboard
floating_bottom_nav_bar: ^1.0.1 copied to clipboard

A customizable floating bottom navigation bar for Flutter with smooth animations, modern UI styling, SVG icon support, and badge indicators.

🚀 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 #

[Floating Bottom Nav Bar 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.

1
likes
0
points
45
downloads

Publisher

unverified uploader

Weekly Downloads

A customizable floating bottom navigation bar for Flutter with smooth animations, modern UI styling, SVG icon support, and badge indicators.

Repository (GitHub)
View/report issues

License

unknown (license)

Dependencies

badges, cupertino_icons, floating_frosted_bottom_bar, flutter, flutter_svg, get

More

Packages that depend on floating_bottom_nav_bar