car_common_app/lib/widgets/tab/menu_tabs.dart

import 'package:flutter/material.dart';
import 'package:mc_common_app/extensions/int_extensions.dart';
import 'package:mc_common_app/theme/colors.dart';
import 'package:mc_common_app/widgets/dropdown/dropdow_field.dart';

class MenuTabs extends StatefulWidget {
  int selectedIndex;
  List<DropValue> dropList;
  Function(DropValue value) onSelect;
  Color? selectedColor;


  MenuTabs(this.selectedIndex, this.dropList, {required this.onSelect, this.selectedColor});

  @override
  State<MenuTabs> createState() => _RoleTypeTabState();
}

class _RoleTypeTabState extends State<MenuTabs> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: 35,
      child: ListView.separated(
        itemBuilder: (context, index) {
          return InkWell(
            onTap: () {
              setState(() {
                widget.selectedIndex = index;
                widget.onSelect(widget.dropList[index]);
              });
            },
            child: Container(
              height: 45,
              decoration: BoxDecoration(
                color: widget.selectedIndex == index ? widget.selectedColor ?? MyColors.darkIconColor : Colors.white,
                border: Border.all(color: widget.selectedIndex == index ? widget.selectedColor ?? MyColors.darkIconColor : MyColors.darkPrimaryColor, width: 1.5),
                borderRadius: const BorderRadius.all(Radius.circular(0)),
              ),
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: Center(
                child: Text(
                  widget.dropList[index].value,
                  style: TextStyle(
                    color: widget.selectedIndex == index ? MyColors.white : Colors.black,
                    fontSize: 12,
                    fontWeight: FontWeight.w600,
                  ),
                ),
              ),
            ),
          );
        },
        separatorBuilder: (context, index) {
          return 12.width;
        },
        padding: const EdgeInsets.symmetric(horizontal: 21),
        itemCount: widget.dropList.length,
        scrollDirection: Axis.horizontal,
      ),
    );
  }
}