HMG_Patient_App_New/lib/widgets/custom_tab_bar.dart

import 'package:flutter/material.dart';
import 'package:hmg_patient_app_new/core/app_export.dart';
import 'package:hmg_patient_app_new/core/utils/utils.dart';
import 'package:hmg_patient_app_new/extensions/int_extensions.dart';
import 'package:hmg_patient_app_new/extensions/string_extensions.dart';
import 'package:hmg_patient_app_new/extensions/widget_extensions.dart';
import 'package:hmg_patient_app_new/theme/colors.dart';

class CustomTabBarModel {
  String? image;
  String title;

  CustomTabBarModel(this.image, this.title);
}

class CustomTabBar extends StatefulWidget {
  final int initialIndex = 0;
  final List<CustomTabBarModel> tabs;
  final Color activeTextColor;
  final Color activeBackgroundColor;
  final Color inActiveTextColor;
  final Color inActiveBackgroundColor;
  final Function(int)? onTabChange;

  const CustomTabBar({
    super.key,
    required this.tabs,
    this.activeTextColor = const Color(0xff2E3039),
    this.inActiveTextColor = const Color(0xff898A8D),
    this.activeBackgroundColor = const Color(0x142E3039),
    this.inActiveBackgroundColor = Colors.white,
    this.onTabChange,
  });

  @override
  CustomTabBarState createState() => CustomTabBarState();
}

class CustomTabBarState extends State<CustomTabBar> {
  int selectedIndex = 0;

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  void callBackCurrentIndex() {
    if (widget.onTabChange != null) widget.onTabChange!(selectedIndex);
  }

  @override
  Widget build(BuildContext context) {
    late Widget parentWidget;

    if (widget.tabs.length > 3) {
      parentWidget = ListView.separated(
        scrollDirection: Axis.horizontal,
        padding: EdgeInsets.zero,
        physics: const BouncingScrollPhysics(),
        itemBuilder: (cxt, index) => myTab(widget.tabs[index], index).expanded,
        separatorBuilder: (cxt, index) => 4.width,
        itemCount: widget.tabs.length,
      );
    } else {
      parentWidget = Row(
        mainAxisAlignment: MainAxisAlignment.center,
        spacing: 4.w,
        children: [for (int i = 0; i < widget.tabs.length; i++) myTab(widget.tabs[i], i).expanded],
      );
    }

    return Container(
        height: 62.h,
        padding: EdgeInsets.all(4.w),
        decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
          color: AppColors.whiteColor,
          borderRadius: 12.r,
        ),
        child: Center(child: parentWidget));
  }

  Widget myTab(CustomTabBarModel tabBar, int currentIndex) {
    bool isSelected = selectedIndex == currentIndex;
    return Container(
        height: 54.h,
        padding: EdgeInsets.only(top: 4.h, bottom: 4.h, left: 14.w, right: 14.w),
        alignment: Alignment.center,
        decoration: RoundedRectangleBorder().toSmoothCornerDecoration(
          color: isSelected ? widget.activeBackgroundColor : widget.inActiveBackgroundColor,
          borderRadius: 12.r,
        ),
        child: Row(
          mainAxisSize: MainAxisSize.min,
          spacing: 4.w,
          children: [
            if (tabBar.image != null)
              Utils.buildSvgWithAssets(
                icon: tabBar.image!,
                height: 18.h,
                width: 18.w,
                iconColor: isSelected ? widget.activeTextColor : widget.inActiveTextColor,
              ),
            tabBar.title.toText13(
                weight: isSelected ? FontWeight.w600 : FontWeight.w500,
                color: isSelected ? widget.activeTextColor : widget.inActiveTextColor,
                letterSpacing: isSelected ? -0.3 : -0.1),
          ],
        )).onPress(() {
      setState(() {
        selectedIndex = currentIndex;
      });
      callBackCurrentIndex();
    });
  }
}