[flutter] toggle button

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

class TextToggleButton extends StatefulWidget {
  final double? width;
  final double? height;

  final String leftDescription;
  final String rightDescription;

  final Color toggleColor;
  final Color toggleBackgroundColor;
  final Color toggleBorderColor;

  final Color inactiveTextColor;
  final Color activeTextColor;

  final double _leftToggleAlign = 1;
  final double _rightToggleAlign = -1;

  final VoidCallback onLeftToggleActive;
  final VoidCallback onRightToggleActive;

  TextToggleButton(
      {Key? key,
      this.width,
      this.height,
      this.toggleBorderColor = Colors.green,
      this.toggleBackgroundColor = const Color.fromRGBO(247, 247, 247, 1),
      this.toggleColor = Colors.green,
      this.activeTextColor = Colors.white,
      this.inactiveTextColor = Colors.grey,
      this.leftDescription = '',
      this.rightDescription = '',
      required this.onLeftToggleActive,
      required this.onRightToggleActive})
      : super(key: key);

  @override
  _TextToggleButtonState createState() => _TextToggleButtonState();
}

class _TextToggleButtonState extends State<TextToggleButton> {
  double _toggleXAlign = -1;

  late Color _leftDescriptionColor;
  late Color _rightDescriptionColor;

  @override
  void initState() {
    super.initState();

    _leftDescriptionColor = widget.activeTextColor;
    _rightDescriptionColor = widget.inactiveTextColor;
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.center,
      children: [
        Container(
          clipBehavior: Clip.none,
          width: widget.width ?? 80.0.w,
          height: widget.height ?? 32.h,
          decoration: BoxDecoration(
            color: widget.toggleBackgroundColor,
            borderRadius: BorderRadius.all(
              Radius.circular(16.r),
            ),
            border: Border.all(color: widget.toggleBorderColor),
          ),
        ),
        SizedBox(
          width: widget.width ?? 80.0.w,
          child: AnimatedAlign(
            alignment: Alignment(_toggleXAlign, 0),
            duration: const Duration(milliseconds: 100),
            child: Container(
              width: widget.width ?? 80.0.w * 0.5,
              height: widget.height ?? 32.h,
              decoration: BoxDecoration(
                color: widget.toggleColor,
                borderRadius: BorderRadius.all(
                  Radius.circular(16.r),
                ),
                border: Border.all(color: widget.toggleColor),
              ),
            ),
          ),
        ),
        SizedBox(
          width: widget.width ?? 80.w,
          child: GestureDetector(
            behavior: HitTestBehavior.opaque,
            onTap: () {
              print('left active');
              setState(
                () {
                  _toggleXAlign = widget._rightToggleAlign;
                  _leftDescriptionColor = widget.activeTextColor;
                  _rightDescriptionColor = widget.inactiveTextColor;
                },
              );

              widget.onLeftToggleActive();
            },
            child: Align(
              alignment: Alignment(-1, 0),
              child: Container(
                width: widget.width ?? 80.w * 0.5,
                height: widget.height ?? 32.h,
                color: Colors.transparent,
                alignment: Alignment.center,
                child: Text(
                  widget.leftDescription,
                  style:
                      TextStyle(color: _leftDescriptionColor, fontSize: 14.sp),
                ),
              ),
            ),
          ),
        ),
        Positioned(
          right: 0,
          child: SizedBox(
            width: widget.width ?? 80.w * 0.5,
            child: GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () {
                print('right active');
                setState(
                  () {
                    _toggleXAlign = widget._leftToggleAlign;
                    _leftDescriptionColor = widget.inactiveTextColor;
                    _rightDescriptionColor = widget.activeTextColor;
                  },
                );

                widget.onRightToggleActive();
              },
              child: Align(
                alignment: Alignment(1, 0),
                child: Container(
                  width: widget.width ?? 80.w * 0.5,
                  height: widget.height ?? 32.h,
                  color: Colors.transparent,
                  alignment: Alignment.center,
                  child: Text(
                    widget.rightDescription,
                    style: TextStyle(
                        color: _rightDescriptionColor, fontSize: 14.sp),
                  ),
                ),
              ),
            ),
          ),
        ),
      ],
    );
  }
}