jbh_bottom_nav_magnifier #

A Flutter package that adds a long-press magnifier to BottomNavigationBar. Hold on the bar to reveal a lens or a callout bubble that previews the hovered item. Release to trigger that item.

Features #

• Long-press lens overlay constrained to the bar area
• Release-to-select: Drop on an item to trigger its onTap
• Customizable: diameter, border, colors, elevation
• Smooth appear/disappear animations with your curve
• Optional calloutBubble mode with a small tail pointing to the finger
• borderRadius: null → circle, otherwise uses your BorderRadius

Installation #

dependencies:
  jbh_bottom_nav_magnifier: ^1.0.0

flutter pub get

Usage #

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

class HomePage extends StatefulWidget {
  const HomePage({super.key});
  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('Tab: $_currentIndex')),
      bottomNavigationBar: JbhBottomNavMagnifier(
        currentIndex: _currentIndex,
        curve: Curves.easeOut,
        elevation: 8,
        // calloutBubble: true, // optional
        // borderRadius: BorderRadius.circular(12), // optional
        // lens customization examples:
        // lensDiameter: 100,
        // lensDetectedItemSize: 36,
        // lensBackgroundColor: Colors.black,
        // lensBackgroundColorOpacity: 0.2,
        // lensBorderColor: Colors.blueAccent,
        // lensBorderWidth: 2,
        // lensAppearDuration: const Duration(milliseconds: 220),
        // lensDisappearDuration: const Duration(milliseconds: 200),
        child: BottomNavigationBar(
          currentIndex: _currentIndex,
          onTap: (i) => setState(() => _currentIndex = i),
          items: const [
            BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
            BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Search'),
            BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
          ],
        ),
      ),
    );
  }
}

API #

• currentIndex (int): Required. The bar's selected index
• curve (Curve): Animation curve (affects appear and disappear)
• elevation (double): Shadow intensity for the lens
• borderRadius (BorderRadius?): null for circle, else rectangular lens
• lensDiameter (double): Lens size
• lensBorderWidth (double), lensBorderColor (Color), lensBorderColorOpacity (double)
• lensBackgroundColor (Color), lensBackgroundColorOpacity (double)
• lensAppearDuration (Duration), lensDisappearDuration (Duration)
• lensDetectedItemSize (double): Icon size inside the lens
• lensDetectedItemColor (Color?), lensDetectedItemColorOpacity (double)
• calloutBubble (bool): Enables speech-bubble style with a tail

Example #

A runnable example is included under example/.

License #

MIT - see LICENSE.