[flutter] toggle button

qkrtnfks128·2022년 5월 17일
0

Flutter 야금야금 먹기

목록 보기
47/58
post-thumbnail
<script>
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class TextToggleButtonWidget 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;

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

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

class _TextToggleButtonWidgetState extends State<TextToggleButtonWidget> {
  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 Container(
      // padding:EdgeInsets.all(2),
      width: widget.width,
      height: widget.height,
      decoration: BoxDecoration(
        color: widget.toggleBackgroundColor,
        borderRadius: BorderRadius.all(
          Radius.circular(16),
        ),
        border: Border.all(color: widget.toggleBorderColor),

      ),
      child: Stack(
        children: [
          AnimatedAlign(
            alignment: Alignment(_toggleXAlign, 0),
            duration: Duration(milliseconds: 300),
            child: Container(
              width: widget.width * 0.5,
              height: widget.height,
              decoration: BoxDecoration(
                color: widget.toggleColor,
                borderRadius: BorderRadius.all(
                  Radius.circular(16),
                ),
                border: Border.all(color: widget.activeTextColor),
              ),
            ),
          ),
          GestureDetector(
            onTap: () {
              setState(
                    () {
                  _toggleXAlign = widget._rightToggleAlign;
                  _leftDescriptionColor = widget.activeTextColor;
                  _rightDescriptionColor = widget.inactiveTextColor;
                },
              );

              widget.onLeftToggleActive();
            },
            child: Align(
              alignment: Alignment(-1, 0),
              child: Container(
                width: widget.width * 0.5,
                color: Colors.transparent,
                alignment: Alignment.center,
                child: Text(
                  widget.leftDescription,
                  style: TextStyle(
                      color: _leftDescriptionColor,
                      fontSize: 14.sp),
                ),
              ),
            ),
          ),
          GestureDetector(
            onTap: () {
              setState(
                    () {
                  _toggleXAlign = widget._leftToggleAlign;
                  _leftDescriptionColor = widget.inactiveTextColor;
                  _rightDescriptionColor = widget.activeTextColor;
                },
              );

              widget.onRightToggleActive();
            },
            child: Align(
              alignment: Alignment(1, 0),
              child: Container(
                width: widget.width * 0.5,
                color: Colors.transparent,
                alignment: Alignment.center,
                child: Text(
                  widget.rightDescription,
                  style: TextStyle(
                      color: _rightDescriptionColor,
                    fontSize: 14.sp
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
</script>


profile
무럭무럭 자라는 망키

0개의 댓글