nav_bar.dart

Go to the documentation of this file.

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:go_router/go_router.dart';
 
import '../theme/color_palette.dart';
 
class NavBar extends StatefulWidget {
  final StatefulNavigationShell navigationShell;
  final Widget? body;
  const NavBar(this.navigationShell, {super.key, this.body});
 
  @override
  State<NavBar> createState() => _NavBarState();
}
 
class _NavBarState extends State<NavBar> with TickerProviderStateMixin {
  int _selectedIndex = 2;
  late List<AnimationController> _animationControllers;
  late List<Animation<double>> _scaleAnimations;
 
  final List<NavItem> _navItems = [
    NavItem(icon: Icons.speed_rounded, label: 'Speed'),
    NavItem(icon: Icons.school_rounded, label: 'School'),
    NavItem(icon: Icons.dashboard_rounded, label: 'Home'),
    NavItem(icon: Icons.notifications_rounded, label: 'Alerts'),
    NavItem(icon: Icons.settings_rounded, label: 'Settings'),
  ];
 
  @override
  void initState() {
    super.initState();
    _initializeAnimations();
  }
 
  void _initializeAnimations() {
    _animationControllers = List.generate(
      _navItems.length,
      (index) => AnimationController(
        duration: const Duration(milliseconds: 50),
        vsync: this,
      ),
    );
 
    _scaleAnimations = _animationControllers.map((controller) {
      return Tween<double>(begin: 1.0, end: 0.85).animate(
        CurvedAnimation(
          parent: controller,
          curve: Curves.easeInOut,
        ),
      );
    }).toList();
  }
 
  @override
  void dispose() {
    for (var controller in _animationControllers) {
      controller.dispose();
    }
    super.dispose();
  }
 
  void _handleTap(int index) async {
    await _animationControllers[index].forward();
    await _animationControllers[index].reverse();
 
    setState(() {
      _selectedIndex = index;
    });
    
    bool shouldResetToInitialLocation = index == widget.navigationShell.currentIndex;
    if (index == 2) {
      shouldResetToInitialLocation = false;
    }
    
    widget.navigationShell.goBranch(
      index,
      initialLocation: shouldResetToInitialLocation,
    );
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: false,
      body: widget.navigationShell,
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.black.withValues(alpha:0.04),
              blurRadius: 16,
              offset: const Offset(0, -4),
            ),
            BoxShadow(
              color: Colors.black.withValues(alpha:0.02),
              blurRadius: 4,
              offset: const Offset(0, -2),
            ),
          ],
        ),
        child: SafeArea(
          child: Container(
            height: 70.sp,
            padding: EdgeInsets.symmetric(horizontal: 8.sp),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: List.generate(
                _navItems.length,
                (index) => _buildNavItem(index),
              ),
            ),
          ),
        ),
      ),
    );
  }
 
  Widget _buildNavItem(int index) {
    bool isSelected = _selectedIndex == index;
    bool isCenter = index == 2;
    final item = _navItems[index];
 
    return GestureDetector(
      onTapDown: (_) => _animationControllers[index].forward(),
      onTapUp: (_) {
        _animationControllers[index].reverse();
        _handleTap(index);
      },
      onTapCancel: () => _animationControllers[index].reverse(),
      child: ScaleTransition(
        scale: _scaleAnimations[index],
        child: SizedBox(
          width: 45.sp,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              AnimatedContainer(
                duration: const Duration(milliseconds: 50),
                curve: Curves.easeInOut,
                height: 40.sp,
                width: 40.sp,
                decoration: BoxDecoration(
                  gradient: isCenter
                      ? LinearGradient(
                          colors: isSelected
                              ? [
                                  ColorPalette.lightGreen,
                                  ColorPalette.darkGreen,
                                ]
                              : [
                                  ColorPalette.lightGreen.withValues(alpha:0.5),
                                  ColorPalette.darkGreen.withValues(alpha:0.5),
                                ],
                          begin: Alignment.topLeft,
                          end: Alignment.bottomRight,
                        )
                      : null,
                  color: !isCenter && isSelected
                      ? ColorPalette.lightGreen.withValues(alpha:0.1)
                      : null,
                  shape: BoxShape.circle,
                  boxShadow: isSelected && isCenter
                      ? [
                          BoxShadow(
                            color: ColorPalette.lightGreen.withValues(alpha:0.3),
                            blurRadius: 8,
                            offset: const Offset(0, 2),
                          ),
                        ]
                      : [],
                ),
                child: Icon(
                  item.icon,
                  size: isSelected ? 26.sp : 24.sp,
                  color: isCenter
                      ? Colors.white
                      : isSelected
                          ? ColorPalette.lightGreen
                          : ColorPalette.grey.withValues(alpha:0.5),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
 
class NavItem {
  final IconData icon;
  final String label;
 
  NavItem({required this.icon, required this.label});
}