H5_Flutter/lib/view/component/link_btn.dart

import 'package:flutter/material.dart';
import 'package:link/constants.dart';

import '../../utils/size_fit.dart';

class LinkButton extends StatefulWidget {
  String title;
  // ignore: prefer_typing_uninitialized_variables
  var callback;
  bool disable;
  bool isBlack;
  double width = 310.px;
  double height = 48.px;
  LinkButton(
      {Key? key,
      required this.title,
      required this.disable,
      required this.isBlack,
      required this.callback,
      double? btnWidth,
      double? btnHeight})
      : super(key: key) {
    if (btnWidth != null) {
      width = btnWidth;
    }
    if (btnHeight != null) {
      height = btnHeight;
    }
  }

  @override
  State<LinkButton> createState() => _LinkButtonState();
}

class _LinkButtonState extends State<LinkButton>
    with SingleTickerProviderStateMixin {
  double scale = 1.0;
  double alpha = 1.0;
  late AnimationController controller;
  late Animation animation;

  @override
  void initState() {
    // TODO: implement initState
    controller = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 100));
    animation = Tween(begin: 0.0, end: 1.0)
        .animate(CurvedAnimation(parent: controller, curve: Curves.easeOut));
    controller.addListener(() {
      setState(() {});
    });
    super.initState();
  }

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

  @override
  Widget build(BuildContext context) {
    SizeFit.initialize(context);
    return GestureDetector(
      onTap: () {
        if (widget.disable == false) {
          widget.callback();
        }
      },
      onTapDown: (TapDownDetails details) {
        if (widget.disable == false) {
          // setState(() {
          //   scale = 0.95;
          //   alpha = 0.8;
          // });

          controller.forward();
        }
      },
      onTapUp: (TapUpDetails details) {
        if (widget.disable == false) {
          // setState(() {
          //   scale = 1.0;
          //   alpha = 1.0;
          // });
          controller.reverse();
        }
      },
      onTapCancel: () {
        if (widget.disable == false) {
          // setState(() {
          //   scale = 1.0;
          //   alpha = 1.0;
          // });
          controller.reverse();
        }
      },
      child: Transform.scale(
        scale: 1 - 0.05 * animation.value,
        child: Opacity(
          opacity: 1 - 0.2 * animation.value, //alpha,
          child: Container(
            width: widget.width + 8.px,
            height: widget.height + 8.px,
            alignment: Alignment.center,
            child: Container(
              alignment: Alignment.center,
              width: widget.width,
              height: widget.height,
              child: Text(
                widget.title,
                style: TextStyle(
                    color:
                        widget.isBlack ? Colors.white : const Color(0xFF131314),
                    fontSize: 16.px,
                    fontWeight: FontWeight.bold),
              ),
              decoration: BoxDecoration(
                  color: widget.isBlack ? Colors.black : kThemeColor,
                  borderRadius: BorderRadius.circular(widget.height / 2.0)),
            ),
            decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                      color: kBtnColor,
                      blurRadius: 0.0,
                      offset: Offset(0, 10.px)),
                  BoxShadow(
                      //透明度 从0.4->0.6,blur 20->60
                      color: const Color(0x66FF9900),
                      blurRadius: 20.px,
                      spreadRadius: 6.px,
                      offset: Offset(0, 20.px))
                ],
                color: kBtnColor,
                borderRadius:
                    BorderRadius.circular(widget.height / 2.0 + 4.px)),
          ),
        ),
      ),
    );
  }
}

class AlertButton extends StatefulWidget {
  String title;
  double width, height;
  // ignore: prefer_typing_uninitialized_variables
  var callback;
  bool isCancel;
  AlertButton(
      {Key? key,
      required this.title,
      required this.isCancel,
      required this.width,
      required this.height,
      required this.callback})
      : super(key: key);

  @override
  State<AlertButton> createState() => _AlertButtonState();
}

class _AlertButtonState extends State<AlertButton> {
  double scale = 1.0;
  double alpha = 1.0;
  @override
  Widget build(BuildContext context) {
    SizeFit.initialize(context);
    return GestureDetector(
      onTap: () {
        widget.callback();
      },
      onTapDown: (TapDownDetails details) {
        setState(() {
          scale = 0.95;
          alpha = 0.8;
        });
      },
      onTapUp: (TapUpDetails details) {
        setState(() {
          scale = 1.0;
          alpha = 1.0;
        });
      },
      onTapCancel: () {
        setState(() {
          scale = 1.0;
          alpha = 1.0;
        });
      },
      child: Transform.scale(
        scale: scale,
        child: Opacity(
          opacity: alpha,
          child: Container(
            width: widget.width + 8.px,
            height: widget.height + 8.px,
            alignment: Alignment.center,
            child: Container(
              alignment: Alignment.center,
              width: widget.width,
              height: widget.height,
              child: Text(
                widget.title,
                style: TextStyle(
                    color: const Color(0xFF131314),
                    fontSize: 16.px,
                    fontWeight: FontWeight.bold),
              ),
              decoration: BoxDecoration(
                  color:
                      widget.isCancel ? const Color(0xFFA5A5AD) : kThemeColor,
                  borderRadius: BorderRadius.circular(widget.height / 2.0)),
            ),
            decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                      color: widget.isCancel ? Colors.black : kBtnColor,
                      blurRadius: 0.0,
                      offset: Offset(0, 10.px)),
                ],
                color: widget.isCancel ? Colors.black : kBtnColor,
                borderRadius:
                    BorderRadius.circular(widget.height / 2.0 + 4.px)),
          ),
        ),
      ),
    );
  }
}