SpotlightBottomNavBar

A customizable and visually appealing bottom navigation bar widget for Flutter applications. The SpotlightBottomNav widget provides an interactive spotlight effect to highlight the selected navigation icon, ensuring a modern and engaging user experience.

Features

Customizable Spotlight Effect: Highlight the active navigation item with a gradient spotlight. Flexible Icon Count: Supports navigation bars with 3, 4, or 5 icons. Dynamic Pages: Easily switch between pages using the bottom navigation bar. Customizable Appearance: Adjust spotlight color and icons for a tailored design. Smooth Animations: Enjoy fluid transitions and animations when navigating between pages.

Preview

Preview:

Getting started

Add the package to your project by updating the pubspec.yaml file:

dependencies:
spotlight_bottom_nav: ^1.0.0

Usage

Here’s a basic example to get started:

import 'package:flutter/material.dart';
import 'package:iconly/iconly.dart';
import 'package:spotlight_bottom_navbar/spotlight_bottom_navbar.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: SpotlightBottomNav(
        spotlightColor: Colors.yellow,
        bottomNavCount: 4,
        icons: const [
          IconlyLight.home,
          IconlyLight.category,
          IconlyLight.profile,
          IconlyLight.setting,
        ],
          pages: [
          Container(
            color: Colors.white,
            child: const Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Home Page',
                    style: TextStyle(color: Colors.black, fontSize: 24)),
              ],
            ),
          ),
          Container(
            color: Colors.white,
            child: const Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Category Page',
                    style: TextStyle(color: Colors.black, fontSize: 24)),
              ],
            ),
          ),
          Container(
            color: Colors.white,
            child: const Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Profile Page',
                    style: TextStyle(color: Colors.black, fontSize: 24)),
              ],
            ),
          ),
          Container(
            color: Colors.white,
            child: const Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Settings Page',
                    style: TextStyle(color: Colors.black, fontSize: 24)),
              ],
            ),
          ),
        ],
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

Parameters Overview