gradient_bottom_navbar 0.0.3

A customizable Flutter bottom navigation bar with gradient-based indicators, smooth transitions, and badge counters for a modern UI experience.

Gradient Bottom Navbar

A highly customizable bottom navigation bar with a gradient indicator, animations, and support for counters. Perfect for adding modern and visually appealing navigation to your Flutter app.

---

Features

• Gradient indicator with customizable height, width, and border radius.
• Smooth animations for screen transitions and indicator movement.
• Customizable item colors for selected and unselected states.
• Support for counters (badges) on navigation items.
• Fully responsive and easy to integrate.

---

Installation

Add the following line to your pubspec.yaml file:

dependencies:
  gradient_bottom_navbar: ^0.0.3

Then, run:

flutter pub get 

Usage

To use the GradientBottomNavbar in your Flutter app, import the package and set it up as shown below:et.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:gradient_bottom_navbar/gradient_bottom_navbar.dart'; // Import the package

// Import your screens
import 'package:my_app/screens/home_screen.dart';
import 'package:my_app/screens/browse_screen.dart';
import 'package:my_app/screens/notifications_screen.dart';
import 'package:my_app/screens/my_profile_screen.dart';

class BottomNavigation extends StatelessWidget {
  const BottomNavigation({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: GradientBottomNavbar(
        items: [
          GradientNavItem(icon: Icons.home, label: 'Home'),
          GradientNavItem(icon: Icons.search, label: 'Browse'),
          GradientNavItem(icon: Icons.notifications, label: 'Notifications', counter: 10),
          GradientNavItem(icon: Icons.person, label: 'My Profile'),
        ],
        screens: [
          HomeScreen(),
          BrowseScreen(),
          NotificationsScreen(),
          MyProfileScreen(),
        ],
      ),
    );
  }
}

Screenshot

demo video

GradientBottomNavbar

Property	Type	Default Value	Description
items	List	Required	List of navigation items.
screens	List	Required	List of screens corresponding to the navigation items.
indicatorHeight	double	50.0	Height of the gradient indicator.
indicatorWidth	double	60.0	Width of the gradient indicator.
indicatorBorderRadius	BorderRadiusGeometry	BorderRadius.all(Radius.circular(20))	Border radius for the indicator.
indicatorGradient	Gradient	LinearGradient(colors: [LightBlue, DarkBlue])	Gradient used for the indicator.
backgroundColor	Color	Colors.white	Background color of the navigation bar.
selectedItemColor	Color	Colors.white	Color of the selected navigation item.
unselectedItemColor	Color	Colors.black	Color of the unselected navigation items.
barBorderRadius	BorderRadiusGeometry?	null	Border radius for the navigation bar.
animationDuration	Duration	Duration(milliseconds: 300)	Duration of the animation for screen transitions and indicator movement.
animationCurve	Curve	Curves.easeInOut	Curve for the animations.
counterColor	Color	Color(0xFFB50000)	Color of the counters (badges) on navigation items.

---

GradientNavItem Properties Table

Property	Type	Description
icon	IconData	Icon for the navigation item.
label	String	Label for the navigation item.
counter	int?	Optional counter to display a badge on the navigation item.

License This package is licensed under the MIT License. See the LICENSE file for details.

Contributions Contributions, issues, and feature requests are welcome! Feel free to check out the issues page.

Author Developed by Piyush Deshmane. If you enjoy this package , feel free to star the repository and share your feedback!