import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor:Colors.black,
      body: Center(
        child: SlideButton(
        label1:'Success',
        label2:'Fail',
        onSelected :(a){}
        ),
      ),
    );
  }
}

typedef SlideEvent = void Function(String selectedLabel);

class SlideButton extends StatefulWidget {
  final String label1;
  final String label2;
  final SlideEvent onSelected;
  SlideButton({
    @required this.label1,
    @required this.label2,
    @required this.onSelected,
  });
  @override
  _SlideButtonState createState() => _SlideButtonState();
}

class _SlideButtonState extends State<SlideButton> {
  List<Color> gradient = [
    Colors.red,
    Colors.grey,
  ];
  double buttonPosition = 110.0;
  String event;
  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 300),
      curve: Curves.easeInOut,
      width: 100.0,
      height: 340.0,
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        gradient: LinearGradient(
          begin: Alignment.topRight,
          end: Alignment.bottomLeft,
          colors: gradient,
        ),
        borderRadius: BorderRadius.circular(100),
      ),
      child: Stack(
        children: <Widget>[
          Positioned(
            left: 0,
            right: 0,
            top: buttonPosition,
            child: GestureDetector(
              onPanUpdate: onPanUpdate,
              onPanEnd: onPanEnd,
              child: Container(
                width: 100.0,
                height: 100.0,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(100),
                  border: Border.all(
                    width: 1,
                    color: Colors.grey,
                  ),
                ),
                child: Center(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Icon(
                        Icons.keyboard_arrow_up,
                      ),
                      Icon(
                        Icons.keyboard_arrow_down,
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ),
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            child: Container(
              width: 100.0,
              height: 80.0,
              decoration: BoxDecoration(
                color: Colors.green,
                borderRadius: BorderRadius.circular(100),
              ),
              child: Center(
                  child: Text(
                '${widget.label1.toUpperCase()}',
                style: TextStyle(
                  color: Colors.white,
                ),
              )),
            ),
          ),
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            child: Container(
              width: 100.0,
              height: 80.0,
              decoration: BoxDecoration(
                color: Colors.red,
                borderRadius: BorderRadius.circular(100),
              ),
              child: Center(
                  child: Text(
                '${widget.label2.toUpperCase()}',
                style: TextStyle(
                  color: Colors.white,
                ),
              )),
            ),
          ),
        ],
      ),
    );
  }

  void onPanUpdate(DragUpdateDetails details) {
    setState(() {
      buttonPosition += details.delta.dy;
      if (buttonPosition < 30) {
        buttonPosition = 30;
      } else if (buttonPosition > 180) {
        buttonPosition = 190;
      }

      if (buttonPosition < 80) {
        gradient = [
          Colors.green,
          Colors.white,
        ];
        event = widget.label1;
      } else if (buttonPosition > 140) {
        gradient = [
          Colors.white,
          Colors.red,
        ];
        event = widget.label2;
      } else {
        gradient = [
          Colors.white,
          Colors.white,
        ];
        event = null;
      }
    });
  }

  void onPanEnd(DragEndDetails details) {
    setState(() {
      gradient = [
        Colors.white,
        Colors.white,
      ];
      buttonPosition = 110;
      widget.onSelected(event);
    });
  }
}