floaty_nav_bar 1.0.0 copy "floaty_nav_bar: ^1.0.0" to clipboard
floaty_nav_bar: ^1.0.0 copied to clipboard

A Flutter package that provides a floating navigation bar that provide a custom floating button for each tab.

FloatyNavBar #

FloatyNavBar is a customizable floating navigation bar for Flutter applications. It provides a sleek and interactive way to navigate between tabs while offering an optional action button for additional functionality.

FloatyNavBar

Features #

  • Customizable tab appearance and behavior
  • Optional floating action button for each tab
  • Smooth animations and transitions
  • Support for various shapes (Circle, Rectangle, Squircle)
  • Easy integration with existing Flutter projects

Installation #

Add the following line to your pubspec.yaml file:

dependencies:
  floaty_nav_bar: ^latest_version

Then run:

flutter pub get

Usage #

Here's a basic example of how to use FloatyNavBar:

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Selected tab: $_selectedIndex'),
      ),
      bottomNavigationBar: FloatyNavBar(
        selectedTab: _selectedIndex,
        tabs: [
          FloatyTab(
            isSelected: _selectedIndex == 0,
            title: 'Home',
            icon: Icon(Icons.home),
            onTap: () => setState(() => _selectedIndex = 0),
          ),
          FloatyTab(
            isSelected: _selectedIndex == 1,
            title: 'Search',
            icon: Icon(Icons.search),
            onTap: () => setState(() => _selectedIndex = 1),
            floatyActionButton: FloatyActionButton(
              icon: Icon(Icons.add),
              onTap: () {
                // Add action for search tab
              },
            ),
          ),
          FloatyTab(
            isSelected: _selectedIndex == 2,
            title: 'Profile',
            icon: Icon(Icons.person),
            onTap: () => setState(() => _selectedIndex = 2),
          ),
        ],
      ),
    );
  }
}

Customization #

FloatyNavBar offers various customization options:

Tab Customization #

You can customize each tab using the FloatyTab class:

FloatyTab(
  isSelected: bool,
  title: String,
  icon: Widget,
  onTap: VoidCallback,
  titleStyle: TextStyle?,
  floatyActionButton: FloatyActionButton?,
  margin: EdgeInsetsGeometry,
  selectedColor: Color?,
  unselectedColor: Color?,
)

Floating Action Button #

Each tab can have an associated floating action button:

FloatyActionButton(
  icon: Widget,
  onTap: VoidCallback,
  size: double?,
  backgroundColor: Color?,
  foregroundColor: Color?,
  elevation: double?,
)

You can choose from different shapes for your navigation bar:

FloatyNavBar(
  // ...
  shape: CircleShape(), // or RectangleShape() or SquircleShape()
)

Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

License #

This project is licensed under the MIT License - see the LICENSE file for details.

4
likes
150
pub points
50%
popularity

Publisher

verified publishermustafaix.live

A Flutter package that provides a floating navigation bar that provide a custom floating button for each tab.

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (license)

Dependencies

flutter

More

Packages that depend on floaty_nav_bar