bottom_navigation_spotlight 0.4.0

A customizable bottom navigation bar with spotlight effects.

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,
)

MenuItem Details

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:

• GitHub Issues: Report a Bug
• Email: [e-mail]