GSFV2/gsf/lib/views/components/bottom_navigation.dart

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:get/get.dart';
import 'package:gsp_app/view_model/bottom_navigation_controller.dart';
import 'package:gsp_app/view_model/global_controller.dart';
import 'package:gsp_app/views/pages/signIn/sign_in.dart';

import '../../view_model/app_tour_controller.dart';
import '../../view_model/home_controller.dart';
import '../../view_model/home_page_controller.dart';
import '../theme.dart';

class BottomNavigation extends StatefulWidget {
  const BottomNavigation({
    Key? key,
  }) : super(key: key);
  @override
  State<BottomNavigation> createState() => _BottomNavigationState();
}

class _BottomNavigationState extends State<BottomNavigation> {
  int _selectedIndex = 0;
  HomePageController homePageController = Get.put(HomePageController());
  final TabsController controller = TabsController();
  final NavigationCrontroller navController = Get.find();

  void _onItemTapped(int index) {
    HomePageController.SessionsActiveTabIndex = 0;
    homePageController.updateBottomNavIndex(index);
  }

  @override
  void initState() {
    super.initState();
    _selectedIndex = homePageController.bottomNavIndex.value;
  }

  void ontaps() {
    if (controller.isLoggedIn) {
      _selectedIndex;
    } else {
      Get.to(() => const SignIn());
    }
  }

  AppTourController appTourController = Get.find();

  @override
  Widget build(BuildContext context) {
    // final brightness = Get.theme.brightness;
    GlobalController globalContoller = Get.find();
    double iconSize = 24;
    return
        // Theme(
        // data: Get.theme.copyWith(
        //   canvasColor: const Color(0xff1C1B1B),
        // ),
        // child:
        Container(
      decoration: BoxDecoration(
        boxShadow: [
          BoxShadow(
            color: ColorConstants.kBlack.withOpacity(0.6),
            blurRadius: 10,
            spreadRadius: 2,
            // offset:
          )
        ],
        borderRadius: const BorderRadius.only(
          topLeft: Radius.circular(10),
          topRight: Radius.circular(10),
        ),
      ),
      child: Obx(
        () => BottomNavigationBar(
          unselectedFontSize: 10,
          selectedFontSize: 10,
          unselectedItemColor: !globalContoller.darkMode.value
              ? ColorConstants.kBlack.withOpacity(0.6)
              : ColorConstants.kWhite,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              activeIcon:
                  // Showcase(
                  //   key: navController.d,
                  //   description: 'Tap to see menu options',
                  //   disableDefaultTargetGestures: true,
                  //   child:
                  ActiveIcon(
                key: appTourController.home,
                iconPath:
                    'assets/image/menuicon/${!globalContoller.darkMode.value ? 'home_black' : 'home'}.svg',
                selectedIndex: _selectedIndex,
              ),
              // ),
              icon: Padding(
                padding: const EdgeInsets.only(bottom: 4.0),
                child: SvgPicture.asset(
                  'assets/image/menuicon/${!globalContoller.darkMode.value ? 'home_black' : 'home'}.svg',
                  width: iconSize,
                  height: iconSize,
                ),
              ),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              activeIcon: ActiveIcon(
                iconPath:
                    'assets/image/menuicon/${!globalContoller.darkMode.value ? 'live_black' : 'live'}.svg',
                selectedIndex: _selectedIndex,
              ),
              icon:
                  // Showcase(
                  //   key: navController.e,
                  //   description: 'Tap to see menu options',
                  //   disableDefaultTargetGestures: true,
                  //   child:
                  Padding(
                key: appTourController.Sessions,
                padding: const EdgeInsets.only(bottom: 4.0),
                child: SvgPicture.asset(
                  'assets/image/menuicon/${!globalContoller.darkMode.value ? 'live_black' : 'live'}.svg',
                  width: iconSize,
                  height: iconSize,
                ),
              ),
              // ),
              label: 'Workout',
            ),
            BottomNavigationBarItem(
              activeIcon: ActiveIcon(
                key: appTourController.bioMaker,
                iconPath:
                    'assets/image/menuicon/${!globalContoller.darkMode.value ? 'weight_scale_black' : 'weight_scale'}.svg',
                selectedIndex: _selectedIndex,
              ),
              icon:
                  // Showcase(
                  //   key: navController.f,
                  //   description: 'Tap to see menu options',
                  //   disableDefaultTargetGestures: true,
                  //   child:
                  Padding(
                key: appTourController.bioMaker,
                padding: const EdgeInsets.only(bottom: 4.0),
                child: SvgPicture.asset(
                  'assets/image/menuicon/${!globalContoller.darkMode.value ? 'weight_scale_black' : 'weight_scale'}.svg',
                  width: iconSize,
                  height: iconSize,
                ),
              ),
              // ),
              label: 'Bioscale',
            ),
            BottomNavigationBarItem(
              activeIcon: ActiveIcon(
                key: appTourController.myRanking,
                iconPath:
                    'assets/image/menuicon/${!globalContoller.darkMode.value ? 'ranking_black' : 'ranking'}.svg',
                selectedIndex: _selectedIndex,
              ),
              icon:
                  // Showcase(
                  // key: navController.g,
                  // description: 'Tap to see menu options',
                  // disableDefaultTargetGestures: true,
                  // child:
                  Padding(
                key: appTourController.myRanking,
                padding: const EdgeInsets.only(bottom: 4.0),
                child: SvgPicture.asset(
                  'assets/image/menuicon/${!globalContoller.darkMode.value ? 'ranking_black' : 'ranking'}.svg',
                  width: iconSize,
                  height: iconSize,
                ),
              ),
              // ),
              label: 'Leaderboard',
            ),
            BottomNavigationBarItem(
              activeIcon: ActiveIcon(
                key: appTourController.myProfile,
                iconPath:
                    'assets/image/sidebarIcons/${!globalContoller.darkMode.value ? 'video_black' : 'video'}.svg',
                selectedIndex: _selectedIndex,
              ),
              icon:
                  // Showcase(
                  //   key: navController.h,
                  //   description: 'Tap to see menu options',
                  //   disableDefaultTargetGestures: true,
                  //   child:
                  Padding(
                key: appTourController.myProfile,
                padding: const EdgeInsets.only(bottom: 4.0),
                child: SvgPicture.asset(
                  'assets/image/sidebarIcons/${!globalContoller.darkMode.value ? 'video_black' : 'video'}.svg',
                  width: iconSize,
                  height: iconSize,
                ),
              ),
              // ),
              label: 'Bites',
            ),
          ],
          type: BottomNavigationBarType.fixed,
          currentIndex: _selectedIndex,
          selectedItemColor: !globalContoller.darkMode.value
              ? ColorConstants.kBlack
              : ColorConstants.kPrimaryColor,
          iconSize: 40,
          onTap: _onItemTapped,
          elevation: 0,
        ),
      ),
    );
    // );
  }
}

class ActiveIcon extends StatelessWidget {
  const ActiveIcon({
    required this.iconPath,
    required this.selectedIndex,
    Key? key,
  }) : super(key: key);

  final String iconPath;
  final int selectedIndex;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 28,
      height: 28,
      padding: const EdgeInsets.all(5),
      decoration: const BoxDecoration(
        shape: BoxShape.circle,
        color: ColorConstants.kPrimaryColor,
      ),
      child: SvgPicture.asset(
        iconPath,
        color: Colors.black,
      ),
    );
  }
}