Navigation

import 'package:flutter/material.dart';
import 'package:nib_motion/nib_motion.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({super.key});
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: NibScaffold(
        screens: const [
          NibNavScreen(child: HomeScreen()),
          NibNavScreen(child: SearchScreen()),
          NibNavScreen(child: ProfileScreen()),
        ],
        navItems: const [
          NibNavItem(icon: Icon(Icons.home_outlined), label: 'Home'),
          NibNavItem(icon: Icon(Icons.search_outlined), label: 'Search'),
          NibNavItem(icon: Icon(Icons.person_outlined), label: 'Profile'),
        ],
      ),
    );
  }
}
 
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});
  @override
  Widget build(BuildContext context) =>
      const Center(child: Text('Home'));
}
 
class SearchScreen extends StatelessWidget {
  const SearchScreen({super.key});
  @override
  Widget build(BuildContext context) =>
      const Center(child: Text('Search'));
}
 
class ProfileScreen extends StatelessWidget {
  const ProfileScreen({super.key});
  @override
  Widget build(BuildContext context) =>
      const Center(child: Text('Profile'));
}

const NibNavItem(
  icon: Icon(Icons.notifications_outlined),
  activeIcon: Icon(Icons.notifications),  // shown only when active
  label: 'Alerts',
  badge: NibNavBadge(count: 3),           // numeric badge
  tooltip: 'Notifications',              // accessibility tooltip
)

// Dot badge — draws a small circle, no number
const NibNavItem(
  icon: Icon(Icons.mail_outlined),
  badge: NibNavBadge(),               // count: null → dot
)
 
// Numeric badge — shows "5", capped at "99+"
const NibNavItem(
  icon: Icon(Icons.chat_bubble_outlined),
  badge: NibNavBadge(count: 5),
)
 
// Hidden badge — count: 0 hides the badge entirely
const NibNavItem(
  icon: Icon(Icons.inbox_outlined),
  badge: NibNavBadge(count: 0),
)
 
// Custom colors
const NibNavItem(
  icon: Icon(Icons.error_outlined),
  badge: NibNavBadge(
    count: 2,
    color: Color(0xFFFF6B35),
    textColor: Color(0xFFFFFFFF),
  ),
)

NibScaffold(
  navBarStyle: NibNavBarStyle(
    backgroundColor: const Color(0xFF1C1C1E),   // dark background
    activeColor: const Color(0xFF54C5F8),        // active icon/label
    inactiveColor: const Color(0xFF636366),      // inactive icon/label
    height: 72,
    iconSize: 26,
    borderRadius: BorderRadius.circular(20),
    margin: const EdgeInsets.fromLTRB(16, 0, 16, 24),
    elevation: 8,
    labelStyle: const TextStyle(
      fontSize: 11,
      fontWeight: FontWeight.w500,
    ),
  ),
  screens: [ /* ... */ ],
  navItems: [ /* ... */ ],
)

navBarStyle: NibNavBarStyle(
  backgroundColor: const Color(0xF0FFFFFF),  // slightly translucent
  borderRadius: BorderRadius.circular(32),
  margin: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
  elevation: 4,
),
extendBodyBehindNavBar: true,  // content scrolls under the floating bar

NibScaffold(
  navIndicator: const NibNavIndicatorStyle(
    type: NibNavIndicatorType.pill,
    color: Color(0x2002569B),   // explicit tint; defaults to activeColor at 12% opacity
    spring: NibSpringDescription.bouncy,
  ),
  // ...
)

navIndicator: NibNavIndicatorStyle.none,

NibScaffold(
  itemAnimation: const NibNavItemAnimation(
    whileTap: NibAnim(scale: 0.80),       // compress on press
    whileActive: NibAnim(scale: 1.15),    // enlarge the active icon
    tapTransition: NibTransition.springSnappy,
  ),
  // ...
)

itemAnimation: NibNavItemAnimation.none,

NibScaffold(
  screenTransition: const NibNavScreenTransition(
    type: NibNavTransitionType.slideHorizontal,
    spring: NibSpringDescription.gentle,
    retriggerPageAnimations: true,
    retriggerDelay: Duration(milliseconds: 80),
  ),
  // ...
)

screenTransition: NibNavScreenTransition.slide,  // slideHorizontal + gentle spring

screenTransition: NibNavScreenTransition(
  type: NibNavTransitionType.fade,
  tween: NibTransition(
    duration: const Duration(milliseconds: 250),
    curve: Curves.easeInOut,
  ),
),

final (enterFrom, exitTo) = NibNavTransitions.resolve(
  NibNavTransitionType.scale,
  direction,   // 1 = forward, -1 = backward
  MediaQuery.sizeOf(context),
);

class MyShell extends StatefulWidget {
  const MyShell({super.key});
  @override
  State<MyShell> createState() => _MyShellState();
}
 
class _MyShellState extends State<MyShell> {
  int _index = 0;
 
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: NibScreenStack(
            currentIndex: _index,
            screenTransition: NibNavScreenTransition.slide,
            screens: const [
              NibNavScreen(child: HomeScreen()),
              NibNavScreen(child: SettingsScreen()),
            ],
          ),
        ),
        // your own bottom bar here
      ],
    );
  }
}

// Keep the home feed alive (default), but let the settings page rebuild
// from scratch every time — it never has scroll state worth preserving.
const NibNavScreen(child: HomeFeed()),
const NibNavScreen(child: SettingsPage(), keepAlive: false),