Curved Bottom Nav Bar #

A beautiful and customizable curved bottom navigation bar with a floating selected icon animation for Flutter applications.

Features #

✨ Beautiful curved design with floating selected icon
🎨 Fully customizable colors and styles
🔄 Smooth animations
📱 Responsive design with flutter_screenutil
🎯 Support for Icons, Image Assets, and Custom Widgets
⚡ Easy to implement

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  curved_bottom_nav_bar: ^1.0.0

Or install it from your local path:

dependencies:
  curved_bottom_nav_bar:
    path: ../curved_bottom_nav_bar

Then run:

flutter pub get

Usage #

Basic Example #

import 'package:flutter/material.dart';
import 'package:curved_bottom_nav_bar/curved_bottom_nav_bar.dart';

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

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

  final List<NavBarItem> _items = [
    NavBarItem(
      icon: Icons.home,
      label: 'Home',
    ),
    NavBarItem(
      icon: Icons.search,
      label: 'Search',
    ),
    NavBarItem(
      icon: Icons.person,
      label: 'Profile',
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildBody(),
      bottomNavigationBar: CurvedBottomNavBar(
        items: _items,
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
      ),
    );
  }

  Widget _buildBody() {
    switch (_currentIndex) {
      case 0:
        return Center(child: Text('Home Page'));
      case 1:
        return Center(child: Text('Search Page'));
      case 2:
        return Center(child: Text('Profile Page'));
      default:
        return Container();
    }
  }
}

Using Asset Images #

final List<NavBarItem> _items = [
  NavBarItem(
    icon: 'assets/icons/home.png',
    label: 'Home',
  ),
  NavBarItem(
    icon: 'assets/icons/search.png',
    label: 'Search',
  ),
  NavBarItem(
    icon: 'assets/icons/profile.png',
    label: 'Profile',
  ),
];

Customization #

CurvedBottomNavBar(
  items: _items,
  currentIndex: _currentIndex,
  onTap: (index) {
    setState(() {
      _currentIndex = index;
    });
  },
  backgroundColor: Colors.white,
  selectedColor: Colors.blue,
  selectedSecondaryColor: Colors.blueAccent,
  unselectedColor: Colors.grey,
  shadowColor: Colors.black26,
  height: 80,
  floatingButtonSize: 65,
  iconSize: 26,
  curveDepth: 40,
  animationDuration: Duration(milliseconds: 400),
  labelTextStyle: TextStyle(
    fontSize: 12,
    fontWeight: FontWeight.w400,
  ),
  selectedLabelTextStyle: TextStyle(
    fontSize: 12,
    fontWeight: FontWeight.w600,
  ),
)

Using Custom Widgets #

final List<NavBarItem> _items = [
  NavBarItem(
    icon: Icons.home,
    label: 'Home',
    customIcon: Container(
      decoration: BoxDecoration(
        color: Colors.blue,
        shape: BoxShape.circle,
      ),
      child: Icon(Icons.home, color: Colors.white),
    ),
  ),
  // ... more items
];

Parameters #

NavBarItem Properties #

Requirements #

• Flutter SDK: >=3.0.0
• Dart SDK: >=3.0.0
• flutter_screenutil: ^5.9.0

License #

MIT License - see LICENSE file for details

Contributing #

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

Author #

Your Name - @yourusername

Support #

If you like this package, please give it a ⭐ on GitHub!