import 'package:flutter/material.dart';

class Button extends StatefulWidget {
  Button(
      {Key key,
      this.title: "",
      this.icon,
      this.onTap,
      this.loading: false,
      this.elevation: true})
      : super(key: key);

  final String title;
  final Widget icon;
  final VoidCallback onTap;
  final bool loading;
  final bool elevation;

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

class _ButtonState extends State<Button> with TickerProviderStateMixin {
  double _buttonSize = 1.0;
  AnimationController _animationController;
  Animation _animation;

  @override
  void initState() {
    _animationController = AnimationController(
        vsync: this,
        lowerBound: 0.7,
        upperBound: 1.0,
        duration: Duration(milliseconds: 120));
    _animation = CurvedAnimation(
        parent: _animationController,
        curve: Curves.easeOutQuad,
        reverseCurve: Curves.easeOutQuad);
    _animation.addListener(() {
      setState(() {
        _buttonSize = _animation.value;
      });
    });
    super.initState();
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  Widget _buildIcon() {
    if (widget.icon != null && (widget.title != null && widget.title != "")) {
      return Container(
          margin: EdgeInsets.only(right: 12.0),
          height: 24.0,
          child: widget.icon);
    } else if (widget.icon != null) {
      return Container(
        height: 18.0,
        width: 18.0,
        child: widget.icon,
      );
    } else {
      return Container();
    }
  }

  @override
  Widget build(BuildContext context) {
    return (GestureDetector(
      onTapDown: (TapDownDetails tap) {
        _animationController.reverse(from: 1.0);
      },
      onTapUp: (TapUpDetails tap) {
        _animationController.forward();
      },
      onTapCancel: () {
        _animationController.forward();
      },
      onTap: Feedback.wrapForTap(widget.onTap, context),
      behavior: HitTestBehavior.opaque,
      child: Transform.scale(
          scale: _buttonSize,
          child: AnimatedContainer(
            duration: Duration(milliseconds: 150),
            margin:
                EdgeInsets.only(bottom: widget.title.isNotEmpty ? 14.0 : 0.0),
            padding: EdgeInsets.symmetric(
                vertical: widget.title != null && widget.title.isNotEmpty
                    ? 12.0
                    : 15.0,
                horizontal: widget.title != null && widget.title.isNotEmpty
                    ? 22.0
                    : 19),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(100.0)),
                gradient: LinearGradient(
                    begin: Alignment(-1.2, 2),
                    end: Alignment(1, -1),
                    stops: [
                      0.1,
                      0.8,
                      1.0
                    ],
                    colors: [
                      Color.fromRGBO(113, 99, 255, 1.0),
                      Color.fromRGBO(78, 40, 253, 1.0),
                      Color.fromRGBO(78, 62, 253, 1.0)
                    ]),
                boxShadow: [
                  BoxShadow(
                      color: Color.fromRGBO(
                          47, 0, 244, widget.elevation ? 0.28 : 0.0),
                      spreadRadius:
                          _buttonSize < 1.0 ? -(1 - _buttonSize) * 50 : 0.0,
                      offset: Offset(0, 7.0),
                      blurRadius: 24.0)
                ]),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                _buildIcon(),
                widget.loading
                    ? Padding(
                        padding: const EdgeInsets.all(2.7),
                        child: SizedBox(
                          height: 19.0,
                          width: 19.0,
                          child: CircularProgressIndicator(
                              backgroundColor: Colors.white,
                              valueColor: AlwaysStoppedAnimation<Color>(
                                  Color.fromRGBO(113, 99, 255, 1.0))),
                        ),
                      )
                    : Padding(
                        padding: EdgeInsets.only(bottom: 3.0),
                        child: Text(widget.title,
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 17.0,
                                fontWeight: FontWeight.w700,
                                fontFamily: "HKGrotesk")),
                      )
              ],
            ),
          )),
    ));
  }
}