Flutter 中的弹簧按钮效果

import 'package:flutter/material.dart';

class ScaleAnimation extends StatefulWidget     {

  final Widget child;

  final Function()? onTap;

  ScaleAnimation({required this.child,required this.onTap,Key? key}):super(key: key);




  @override
  State createState() => _ScaleAnimationState();

}


class _ScaleAnimationState extends State with SingleTickerProviderStateMixin {

  late AnimationController _animationController;

  late Animation _scaleAnimation;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 200),
    );

    _scaleAnimation = Tween(
      begin: 1.0,
      end: 0.8,
    ).animate(_animationController);

  }


  void _playAnimation() {
    _animationController.forward();
    Future.delayed(Duration(milliseconds: 200), () {
      _animationController.reverse();
    });
  }

  @override
  Widget build(BuildContext context) {
      return   GestureDetector(

        onTap: (){
          _playAnimation();
          widget.onTap?.call();
        },
        child: AnimatedBuilder (
          animation: _scaleAnimation,
          builder:(BuildContext context, Widget? child){
            return Transform.scale(
              scale: _scaleAnimation.value,
              child: child,

            );
          },
          child: widget.child,

        ),
      );
  }

}

你可能感兴趣的:(flutter)