custom_bottom_navigation_bar.dart

import 'package:equatable/equatable.dart';
import 'package:flutter/material.dart' hide BottomNavigationBar;
import 'package:flutter_svg/flutter_svg.dart';
import 'package:sas/application/presentation/resources/redesign/colors.dart';
import 'package:sas/application/presentation/widgets/redesign/avatar/simple_circle_avatar.dart';
import 'package:sas/application/presentation/widgets/redesign/bottom_nav_bar/bottom_navigation_bar.dart';

//This is the second version of CustomBottomNavigationBar. I suggest to use this widget in the app

const double _navBarHeight = 84;

class CustomBottomNavBarItem extends Equatable {
  const CustomBottomNavBarItem.icon({
    required this.iconName,
    this.label = '',
    this.iconSize = 32,
    this.imageUrl = '',
    this.tooltip = '',
  });

  const CustomBottomNavBarItem.image({
    this.iconName = '',
    this.label = '',
    this.iconSize = 20,
    required this.imageUrl,
    this.tooltip = '',
  });

  final String iconName;
  final String label;
  final double iconSize;
  final String imageUrl;
  final String tooltip;

  @override
  List<Object?> get props => [iconName, label, iconSize, imageUrl, tooltip];
}

class CustomBottomNavigationBar extends StatefulWidget {
  const CustomBottomNavigationBar({
    required this.onTap,
    required this.tabs,
    this.backgroundColor,
    final Key? key,
  }) : super(key: key);

  final void Function(int)? onTap;
  final List<CustomBottomNavBarItem> tabs;
  final Color? backgroundColor;

  @override
  State<CustomBottomNavigationBar> createState() => _CustomBottomNavigationBarState();
}

class _CustomBottomNavigationBarState extends State<CustomBottomNavigationBar> {
  int _selectedTabIndex = 0;

  @override
  Widget build(final BuildContext context) => BottomNavigationBar(
        elevation: 0,
        itemDecoration: (final context, final index, final item) => AnimatedContainer(
          height: _navBarHeight,
          duration: const Duration(milliseconds: 300),
          decoration: index == _selectedTabIndex
              ? BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.bottomCenter,
                    end: Alignment.topCenter,
                    colors: [
                      Theme.of(context).colorScheme.secondaryContainer,
                      transparent,
                    ],
                  ),
                )
              : const BoxDecoration(),
          child: item,
        ),
        currentIndex: _selectedTabIndex,
        onTap: (final int index) {
          setState(() => _selectedTabIndex = index);
          if (widget.onTap != null) {
            widget.onTap!(index);
          }
        },
        items: List.generate(
          widget.tabs.length,
          (final int index) {
            final navBarItem = widget.tabs[index];
            if (navBarItem.imageUrl.isNotEmpty) {
              return BottomNavigationBarItem(
                icon: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 6),
                  child: SimpleCircleAvatar(
                    imageUrl: navBarItem.imageUrl,
                    size: navBarItem.iconSize,
                  ),
                ),
                label: navBarItem.label,
                tooltip: navBarItem.tooltip,
              );
            } else {
              return BottomNavigationBarItem(
                icon: navBarItem.iconName.isNotEmpty
                    ? SvgPicture.asset(
                        navBarItem.iconName,
                        color: Theme.of(context).bottomNavigationBarTheme.unselectedItemColor,
                      )
                    : Icon(
                        Icons.check_box_outline_blank,
                        size: navBarItem.iconSize,
                      ),
                activeIcon: navBarItem.iconName.isNotEmpty
                    ? SvgPicture.asset(
                        navBarItem.iconName,
                        color: Theme.of(context).bottomNavigationBarTheme.selectedItemColor,
                      )
                    : Icon(
                        Icons.check_box_outline_blank,
                        size: navBarItem.iconSize,
                      ),
                label: navBarItem.label,
                tooltip: navBarItem.tooltip,
              );
            }
          },
        ),
      );
}

class _BackgroundGradientBoxWidget extends StatelessWidget {
  const _BackgroundGradientBoxWidget({
    required this.tabsLength,
    required this.selectedTabIndex,
    final Key? key,
  }) : super(key: key);

  final int tabsLength;
  final int selectedTabIndex;

  @override
  Widget build(final BuildContext context) => Row(
        children: List.generate(
          tabsLength,
          (final int index) => Expanded(
            child: Container(
              height: _navBarHeight,
              decoration: index == selectedTabIndex
                  ? BoxDecoration(
                      gradient: LinearGradient(
                        begin: Alignment.bottomCenter,
                        end: Alignment.topCenter,
                        colors: [
                          Theme.of(context).colorScheme.secondaryContainer,
                          transparent,
                        ],
                      ),
                    )
                  : null,
            ),
          ),
        ),
      );
}