game_button.dart

import 'package:flutter/material.dart';

class GameButton extends StatelessWidget {
  const GameButton({required this.child, this.color, this.height = 56, this.width, required this.onTap, super.key});
  final Widget child;
  final Color? color;

  final double height;
  final double? width;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      padding: const EdgeInsets.all(4),
      child: CustomPaint(
        painter: _GameButtonPainter(color: color ?? Theme.of(context).colorScheme.primary),
        child: ClipPath(
          clipper: _CustomClipper(),
          child: Material(
            color: Colors.transparent,
            child: InkWell(
              onTap: onTap,
              child: Container(
                width: width,
                alignment: Alignment.center,
                height: height,
                child: DefaultTextStyle(
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                  ),
                  child: child,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class _GameButtonPainter extends CustomPainter {
  final Color color;

  _GameButtonPainter({required this.color});
  @override
  void paint(Canvas canvas, Size size) {
    final w = size.width;
    final h = size.height;
    final paint = Paint()
      ..color = color
      ..style = PaintingStyle.fill;

    Path path = Path()
      ..moveTo(34, 4)
      ..lineTo(w - 20, 4)
      ..lineTo(w - 4, 16)
      ..lineTo(w - 4, h - 24)
      ..lineTo(w - 28, h - 4)
      ..lineTo(16, h - 4)
      ..lineTo(4, h - 12)
      ..lineTo(4, 24)
      ..lineTo(34, 4);

    canvas.drawPath(path, paint);

    final wp = (w / 100);

    final borderPaint = Paint()
      ..color = color
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.5;

    Path borderPath = Path()
      ..moveTo(0, 20)
      ..lineTo(30, 0)
      ..lineTo(30 + (wp * 10), 0);

    canvas.drawPath(borderPath, borderPaint);

    borderPath = Path()
      ..moveTo(((wp * 50) - (wp * 12)), 0)
      ..lineTo(((wp * 50) - (wp * 12)), 0)
      ..lineTo(((wp * 50) + (wp * 12)), 00);

    canvas.drawPath(borderPath, borderPaint);

    borderPath = Path()
      ..moveTo(w, 18)
      ..lineTo(w, 18)
      ..lineTo(w, h - 22)
      ..lineTo(w - 26, h)
      ..lineTo(w - (wp * 24), h);

    canvas.drawPath(borderPath, borderPaint);

    borderPath = Path()
      ..moveTo(20, h)
      ..lineTo(20, h)
      ..lineTo(20 + (wp * 13), h);

    canvas.drawPath(borderPath, borderPaint);

    borderPath = Path()
      ..moveTo(0, h - 8)
      ..lineTo(0, h - 8)
      ..lineTo(12, h);

    canvas.drawPath(borderPath, borderPaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

class _CustomClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final w = size.width;
    final h = size.height;
    return Path()
      ..moveTo(34, 4)
      ..lineTo(w - 20, 4)
      ..lineTo(w - 4, 16)
      ..lineTo(w - 4, h - 24)
      ..lineTo(w - 28, h - 4)
      ..lineTo(16, h - 4)
      ..lineTo(4, h - 12)
      ..lineTo(4, 24)
      ..lineTo(34, 4);
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}