apskel-pos-flutter/lib/presentation/home/widgets/custom_tab_bar.dart

import 'package:flutter/material.dart';

import '../../../core/constants/colors.dart';

class CustomTabBar extends StatefulWidget {
  final List<String> tabTitles;
  final int initialTabIndex;
  final List<Widget> tabViews;

  const CustomTabBar({
    super.key,
    required this.tabTitles,
    required this.initialTabIndex,
    required this.tabViews,
  });

  @override
  State<CustomTabBar> createState() => _CustomTabBarState();
}

class _CustomTabBarState extends State<CustomTabBar> {
  late int _selectedIndex;

  @override
  void initState() {
    super.initState();
    _selectedIndex = widget.initialTabIndex;
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(
          padding: EdgeInsets.all(16),
          decoration: BoxDecoration(
            color: Colors.white,
          ),
          child: Row(
            children: List.generate(
              widget.tabTitles.length,
              (index) => GestureDetector(
                onTap: () {
                  setState(() {
                    _selectedIndex = index;
                  });
                },
                child: Container(
                  padding:
                      const EdgeInsets.symmetric(vertical: 6, horizontal: 12),
                  margin: const EdgeInsets.only(right: 16),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                    color: _selectedIndex == index
                        ? AppColors.primary
                        : Colors.transparent,
                  ),
                  child: Text(
                    widget.tabTitles[index],
                    style: TextStyle(
                      color: _selectedIndex == index
                          ? Colors.white
                          : AppColors.primary,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.symmetric(vertical: 18.0),
          child: widget.tabViews[_selectedIndex],
        ),
      ],
    );
  }
}

class CustomTabBarV2 extends StatelessWidget {
  final List<String> tabTitles;
  final List<Widget> tabViews;

  const CustomTabBarV2({
    super.key,
    required this.tabTitles,
    required this.tabViews,
  });

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: tabTitles.length,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Material(
            elevation: 0,
            color: Colors.white,
            borderOnForeground: false,
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 16),
              child: TabBar(
                isScrollable: true,
                tabAlignment: TabAlignment.start,
                labelColor: AppColors.primary,
                labelStyle: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
                dividerColor: AppColors.primary,
                unselectedLabelColor: AppColors.primary,
                indicatorSize: TabBarIndicatorSize.label,
                indicatorWeight: 4,
                indicatorColor: AppColors.primary,
                tabs: tabTitles
                    .map((title) => Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 16),
                          child: Tab(text: title),
                        ))
                    .toList(),
              ),
            ),
          ),
          Expanded(
            // ✅ ini bagian penting
            child: TabBarView(
              children: tabViews,
            ),
          ),
        ],
      ),
    );
  }
}