tab_selector.dart

Go to the documentation of this file.

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
 
import '../theme/color_palette.dart';
 
class TabSelector extends StatefulWidget {
  final Function(bool) onTabSelected;
  final bool initialSelection;
  final String firstTabName;
  final String secondTabName;
 
  const TabSelector({
    super.key,
    required this.onTabSelected,
    required this.firstTabName,
    required this.secondTabName,
    this.initialSelection = true,
  });
 
  @override
  State<TabSelector> createState() => _TabSelectorState();
}
 
class _TabSelectorState extends State<TabSelector> {
  late bool isFirstTabSelected;
 
  @override
  void initState() {
    super.initState();
    isFirstTabSelected = widget.initialSelection;
  }
 
  void _toggleTab(bool value) {
    setState(() {
      isFirstTabSelected = value;
    });
    widget.onTabSelected(value);
  }
 
  @override
  Widget build(BuildContext context) {
    return Container(
      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: [
            Expanded(
              child: InkWell(
                onTap: () => _toggleTab(true),
                child: Container(
                  padding: EdgeInsets.symmetric(vertical: 16.sp),
                  decoration: BoxDecoration(
                    color: !isFirstTabSelected ? ColorPalette.grey.withValues(alpha:0.1) : ColorPalette.white,
                    border: Border(
                      bottom: BorderSide(
                        color: !isFirstTabSelected ? ColorPalette.white : ColorPalette.lightGreen,
                        width: 2.sp,
                      ),
                    ),
                  ),
                  child: Text(
                    widget.firstTabName,
                    textAlign: TextAlign.center,
                    style: Theme.of(context).textTheme.titleSmall!.copyWith(
                      color: isFirstTabSelected ? ColorPalette.black : ColorPalette.grey,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ),
              ),
            ),
            Expanded(
              child: InkWell(
                onTap: () => _toggleTab(false),
                child: Container(
                  padding: EdgeInsets.symmetric(vertical: 16.sp),
                  decoration: BoxDecoration(
                    color: isFirstTabSelected ? ColorPalette.grey.withValues(alpha:0.1) : ColorPalette.white,
                    border: Border(
                      bottom: BorderSide(
                        color: isFirstTabSelected ? ColorPalette.white : ColorPalette.lightGreen,
                        width: 2.sp,
                      ),
                    ),
                  ),
                  child: Text(
                    widget.secondTabName,
                    textAlign: TextAlign.center,
                    style: Theme.of(context).textTheme.titleSmall!.copyWith(
                      color: !isFirstTabSelected ? ColorPalette.black : ColorPalette.grey,
                      fontWeight: FontWeight.w600,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}