// import 'package:flutter/material.dart';
// import 'package:flutter_screenutil/flutter_screenutil.dart';

// class MyTabBar extends StatelessWidget {
//   // Set the desired height

//   @override
//   Widget build(BuildContext context) {
//     return Container(
//       decoration: BoxDecoration(
//         border: Border.all(
//           color: Color(0Xff4A73FB).withOpacity(0.6),
//         ),
//         borderRadius: BorderRadius.circular(8.r),
//       ),
//       padding: const EdgeInsets.all(10.0), // Set the desired padding
//       child: TabBar(
//           indicator: BoxDecoration(
//             color: const Color(0xff00C236),
//             borderRadius: BorderRadius.circular(5),
//           ),
//           isScrollable: false,
//           dividerColor: Colors.transparent,
//           labelStyle: TextStyle(
//               fontSize: 18.sp,
//               color: Colors.white,
//               fontWeight: FontWeight.w500,
//               fontFamily: 'hiragino'),
//           indicatorSize: TabBarIndicatorSize.tab,
//           indicatorColor: const Color(0xFFFFFFFF),
//           labelColor: Colors.white,
//           unselectedLabelColor: const Color(0xffFFFFFF),
//           overlayColor: MaterialStateProperty.all(const Color(0xFFFFFFFF)),
//           onTap: ,
//           tabs: const [
//             Tab(
//               text: 'Active Calls',
//             ),
//             Tab(
//               text: 'Exited Calls',
//             ),
//           ]),
//     );
//   }
// }
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class MyTabBar extends StatefulWidget {
  @override
  _MyTabBarState createState() => _MyTabBarState();
}

class _MyTabBarState extends State<MyTabBar> {
  Color _indicatorColor = Colors.green; // Initial indicator color

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(
          color: Color(0Xff4A73FB).withOpacity(0.6),
        ),
        borderRadius: BorderRadius.circular(8.r),
      ),
      padding: const EdgeInsets.all(10.0), // Set the desired padding
      child: TabBar(
        indicator: BoxDecoration(
          borderRadius: BorderRadius.circular(5.r),
          color: _indicatorColor, // Set indicator color dynamically
        ),
        isScrollable: false,
        dividerColor: Colors.transparent,
        labelStyle: TextStyle(
          fontSize: 18,
          color: Colors.white,
          fontWeight: FontWeight.w500,
          fontFamily: 'hiragino',
        ),
        indicatorSize: TabBarIndicatorSize.tab,
        labelColor: Colors.white,
        unselectedLabelColor: const Color(0xffFFFFFF),
        overlayColor: MaterialStateProperty.all(const Color(0xFFFFFFFF)),
        tabs: const [
          Tab(
            text: 'Active Calls',
          ),
          Tab(
            text: 'Exited Calls',
          ),
        ],
        onTap: (index) {
          // Update indicator color based on selected tab
          setState(() {
            _indicatorColor = index == 0 ? Colors.green : Colors.red;
          });
        },
      ),
    );
  }
}