Gradient Indicator Bottom Nav Bar

Looking for a bottom navigation bar with a gradient background? Here it is: Gradient Indicator Bottom Nav Bar.

Implement a beautiful bottom navigation bar with a selection indicator and a gradient background.

Just provide the icons with their labels and you’re ready to go. 🚀

Screenshots

Getting Started

1. Install the dependency:

   flutter pub add gradient_indicator_nav_bar
   

2. Import the package:

   import 'package:gradient_indicator_nav_bar/gradient_indicator_nav_bar.dart';
   

3. Create the Provider controller:

   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return ChangeNotifierProvider(
         create: (context) => NavBarController(),
         child: MaterialApp(
           title: 'Flutter Demo',
           theme: ThemeData(
             colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
           ),
           home: const Example(),
         ),
       );
     }
   }
   

4. Add the CustomNavBar in your Scaffold in the bottomNavigationBar item:

   class Example extends StatefulWidget {
     const Example({super.key});
   
     @override
     State<Example> createState() => _ExampleState();
   }
   
   class _ExampleState extends State<Example> {
     int index = 0;
   
     final List<Widget> pages = [
       HomePage(),
       ProfilePage(),
     ];
   
     final List<NavBarItem> items = [
       NavBarItem(icon: Icons.home, label: 'Home'),
       NavBarItem(icon: Icons.person, label: 'Profile'),
     ];
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         backgroundColor: Colors.white,
         bottomNavigationBar: CustomNavBar(
           height: 90,
           items: items,
           onChanged: (value) {
             _onChanged(value);
           },
         ),
         body: AnimatedSwitcher(
           duration: const Duration(milliseconds: 1200),
           child: pages[index],
         ),
       );
     }
   
     void _onChanged(int value) {
       setState(() {
         index = value;
       });
     }
   }