triple_tab_selector.dart

Go to the documentation of this file.

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
 
import '../../../../../../core/ui/theme/color_palette.dart';
 
class TripleTabSelector extends StatefulWidget {
  final Function(int) onTabSelected;
  final int initialSelection;
  final String firstTabName;
  final String secondTabName;
  final String thirdTabName;
 
  const TripleTabSelector({
    super.key,
    required this.onTabSelected,
    required this.firstTabName,
    required this.secondTabName,
    required this.thirdTabName,
    this.initialSelection = 0,
  });
 
  @override
  State<TripleTabSelector> createState() => _TripleTabSelectorState();
}
 
class _TripleTabSelectorState extends State<TripleTabSelector> {
  late int selectedTabIndex;
 
  @override
  void initState() {
    super.initState();
    selectedTabIndex = widget.initialSelection;
  }
 
  void _selectTab(int index) {
    setState(() {
      selectedTabIndex = index;
    });
    widget.onTabSelected(index);
  }
 
  Widget _buildTab(BuildContext context, String tabName, int index) {
    bool isSelected = selectedTabIndex == index;
    bool hasGreyBackground = selectedTabIndex != index;
 
    return Expanded(
      child: InkWell(
        onTap: () => _selectTab(index),
        child: Container(
          padding: EdgeInsets.symmetric(vertical: 16.sp),
          decoration: BoxDecoration(
            color: hasGreyBackground ? ColorPalette.grey.withValues(alpha:0.1) : ColorPalette.white,
            border: Border(
              bottom: BorderSide(
                color: isSelected ? ColorPalette.lightGreen : ColorPalette.white,
                width: 2.sp,
              ),
            ),
          ),
          child: Text(
            tabName,
            textAlign: TextAlign.center,
            style: Theme.of(context).textTheme.titleSmall!.copyWith(
              color: isSelected ? ColorPalette.black : ColorPalette.grey,
              fontWeight: FontWeight.w600,
            ),
          ),
        ),
      ),
    );
  }
 
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 5.sp),
      decoration: BoxDecoration(
        color: ColorPalette.white,
        boxShadow: [
          BoxShadow(
            color: ColorPalette.black.withValues(alpha:0.04),
            blurRadius: 15,
            offset: const Offset(0, 5),
          ),
        ],
      ),
      child: Padding(
        padding: EdgeInsets.all(2.sp),
        child: Row(
          children: [
            _buildTab(context, widget.firstTabName, 0),
            _buildTab(context, widget.secondTabName, 1),
            _buildTab(context, widget.thirdTabName, 2),
          ],
        ),
      ),
    );
  }
}