Bottom Navigation Spotlight

A highly customizable Bottom Navigation Bar widget for Flutter, featuring smooth animations, predefined templates for medical and e-commerce apps, and flexible configuration options.

Installation

Add the dependency in your pubspec.yaml:

dependencies:
  bottom_navigation_spotlight: ^0.2.0

Then, fetch the package:

flutter pub get

Usage

1. Default Custom Navigation

You can create a custom bottom navigation bar with your own icons, labels, and screens:

import 'package:bottom_navigation_spotlight/bottom_navigation_spotlight.dart';
import 'package:flutter/material.dart';
import 'package:iconsax/iconsax.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BottomNavigationSpotlight(
        menuItems: [
          MenuItem(
            icon: Iconsax.home,
            label: 'Home',
            screen: Center(child: Text('Home Screen')),
          ),
          MenuItem(
            icon: Iconsax.search_favorite,
            label: 'Search',
            screen: Center(child: Text('Search Screen')),
          ),
          MenuItem(
            icon: Iconsax.notification,
            label: 'Notifications',
            screen: Center(child: Text('Notifications Screen')),
          ),
          MenuItem(
            icon: Iconsax.profile_tick,
            label: 'Profile',
            screen: Center(child: Text('Profile Screen')),
          ),
        ],
        backgroundColor: Colors.white,
        selectedItemColor: Colors.blue,
        unselectedItemColor: Colors.grey,
        iconSize: 24,
        textSize: 12,
        padding: 12,
      ),
    );
  }
}

2. Predefined Templates

We offer pre-configured templates for faster integration into specific app categories:

🏥 Medical Template

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

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BottomNavigationSpotlight.medical(),
    );
  }
}

Pages Included:

  • Dashboard
  • Appointments
  • Notifications
  • Profile

🛒 E-commerce Template

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

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: BottomNavigationSpotlight.ecommerce(),
    );
  }
}

Pages Included:

  • Home
  • Categories
  • Cart
  • Profile

Customization Options

You can fine-tune the appearance and behavior of the navigation bar:

Property Description Default
menuItems List of MenuItem objects Required
backgroundColor Background color of the nav bar Colors.white
selectedItemColor Color for the selected item Colors.blue
unselectedItemColor Color for unselected items Colors.grey
iconSize Icon size 24.0
textSize Text size for labels 12.0
padding Padding around items 8.0

Example of Customization:

BottomNavigationSpotlight(
  menuItems: [
    MenuItem(icon: Iconsax.home, label: 'Home', screen: Text('Home Screen')),
    MenuItem(icon: Iconsax.profile_tick, label: 'Profile', screen: Text('Profile Screen')),
  ],
  backgroundColor: Colors.black,
  selectedItemColor: Colors.green,
  unselectedItemColor: Colors.white,
  iconSize: 30,
  textSize: 14,
  padding: 16,
)

Each MenuItem object represents one navigation tab.

Property Description Type Required
icon Icon for the tab IconData ✅ Yes
label Text label String ✅ Yes
screen Screen/widget to show Widget ✅ Yes

Changelog

View the full changelog here.

License

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

Contributing

We welcome contributions!

  • Report bugs via GitHub Issues.
  • Open a Pull Request for improvements or fixes.

Support

If you encounter any issues or need help, feel free to reach out:

Libraries

bottom_navigation_spotlight