button.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flame/flame.dart';

class ButtonStyle {
  final Color topColor;
  final Color backColor;
  const ButtonStyle({@required this.topColor, @required this.backColor});
  static const DEFAULT = const ButtonStyle(
      topColor: const Color(0xFF45484c),
      backColor: const Color(0xFF191a1c)
  );
  static const RED = const ButtonStyle(
      topColor: const Color(0xFFc62f2f),
      backColor: const Color(0xFF922525)
  );
  static const BLUE = const ButtonStyle(
      topColor: const Color(0xFF25a09c),
      backColor: const Color(0xFF197572)
  );
  static const WHITE = const ButtonStyle(
      topColor: const Color(0xFFffffff),
      backColor: const Color(0xFFCFD8DC)
  );
}

class GameButton extends StatefulWidget {
  final VoidCallback onPressed;
  final Image icon;
  final ButtonStyle style;

  static const DEFAULT_COLOR = Color(0xFF45484c);
  static const DEFAULT_COLOR_BACKGROUND = Color(0xFF191a1c);
  GameButton({@required this.onPressed, @required this.icon, this.style = ButtonStyle.DEFAULT});

  @override
  State<StatefulWidget> createState() => GameButtonState();
}

class GameButtonState extends State<GameButton> {

  bool isPushed = false;
  static const BUTTON_HEIGHT = 70.0;
  static const BORDER_RADIUS = 7.0;
  static const BUTTON_WIDTH = 100.0;
  static const BUTTON_Z = 8.0;
  static const DOWN_PADDING = 4.0;
  Widget _buildBackLayout() {
    return DecoratedBox(
      position: DecorationPosition.background,
      decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(BORDER_RADIUS)),
          boxShadow:[
            BoxShadow(
                color: widget.style.backColor
            )
          ]
      ),
      child: ConstrainedBox(
        constraints: BoxConstraints.expand(width: BUTTON_WIDTH, height: isPushed ? BUTTON_HEIGHT - BUTTON_Z : BUTTON_HEIGHT),
      ),
    );
  }

  Widget _buildTopLayout() {
    return Padding(
      padding: EdgeInsets.only(bottom: DOWN_PADDING),
      child: DecoratedBox(
        position: DecorationPosition.background,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.all(Radius.circular(BORDER_RADIUS)),
            boxShadow:[
              BoxShadow(
                  color: widget.style.topColor
              )
            ]
        ),
        child: ConstrainedBox(
          constraints: BoxConstraints.expand(width: BUTTON_WIDTH, height: BUTTON_HEIGHT - BUTTON_Z - DOWN_PADDING),
          child: Padding(padding: EdgeInsets.all(10.0), child: widget.icon),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(5.0),
      child: GestureDetector(
        child: Stack(
          alignment: isPushed ? AlignmentDirectional.bottomStart : AlignmentDirectional.topStart,
          children: <Widget>[
            ConstrainedBox(
              constraints: BoxConstraints.expand(width: BUTTON_WIDTH, height: BUTTON_HEIGHT),
            ),
            _buildBackLayout(),
            _buildTopLayout()
          ],
        ),
        onTapDown: (TapDownDetails event) {
          setState(() {
            isPushed = true;
            Flame.audio.play('click.mp3');
          });
        },
        onTapUp: (TapUpDetails event) {
          setState(() {
            isPushed = false;
          });
          widget.onPressed();
        }
      ),
    );
  }

}