custom_navbar.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 'package:hugeicons/hugeicons.dart';
 
class CustomNavBar extends StatefulWidget {
  final StatefulNavigationShell navigationShell;
  final Widget? body;
  const CustomNavBar(this.navigationShell, {super.key, this.body});
 
  @override
  State<CustomNavBar> createState() => _CustomNavBarState();
}
 
class _CustomNavBarState extends State<CustomNavBar>
    with TickerProviderStateMixin {
  int _selectedIndex = 2;
  late List<AnimationController> _animationControllers;
  late List<Animation<double>> _scaleAnimations;
 
  final List<IconData> _icons = [
    HugeIcons.strokeRoundedDashboardSpeed02,
    HugeIcons.strokeRoundedMortarboard02,
    HugeIcons.strokeRoundedMenuCircle,
    HugeIcons.strokeRoundedUser,
    HugeIcons.strokeRoundedSettings01,
  ];
 
  @override
  void initState() {
    super.initState();
    _initializeAnimations();
  }
 
  void _initializeAnimations() {
    _animationControllers = List.generate(
      _icons.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;
    });
    widget.navigationShell.goBranch(
      index,
      initialLocation: index == widget.navigationShell.currentIndex,
    );
  }
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: false,
      body: widget.navigationShell,
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          color: Theme.of(context).colorScheme.surface,
        ),
        child: SafeArea(
          child: Container(
            height: 70.sp,
            padding: EdgeInsets.symmetric(horizontal: 8.sp),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: List.generate(
                _icons.length,
                (index) => _buildNavItem(index),
              ),
            ),
          ),
        ),
      ),
    );
  }
 
  Widget _buildNavItem(int index) {
    bool isSelected = _selectedIndex == index;
    final item = _icons[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: 50.sp,
                width: 50.sp,
                decoration: BoxDecoration(
                  border: Border(
                    bottom: BorderSide(
                      width: 1.5,
                      color: isSelected
                          ? Theme.of(context).colorScheme.primary
                          : Colors.transparent,
                    ),
                  ),
                ),
                child: Icon(
                  item,
                  size: isSelected ? 24.sp : 23.sp,
                  color: isSelected
                      ? Theme.of(context).colorScheme.primary
                      : Theme.of(context).hintColor.withOpacity(0.2),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}