Flutter学习之路->阴影小动画

以下是阴影隐式动画和显式动画的两种实现方式

1.隐式动画

import 'package:flutter/material.dart';

class ShadowAnimation extends StatefulWidget {
  @override
  _ShadowAnimationState createState() => _ShadowAnimationState();
}

class _ShadowAnimationState extends State<ShadowAnimation> {
  bool _isShadowed = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _isShadowed = !_isShadowed;
        });
      },
      child: Center(
        child: AnimatedContainer(
          duration: Duration(milliseconds: 500),
          height: 200.0,
          width: 200.0,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(100.0),
            boxShadow: _isShadowed
                ? [
              BoxShadow(
                color: Colors.grey.withOpacity(0.5),
                spreadRadius: 4,
                blurRadius: 7,
                offset: Offset(0, 3),
              )
            ]
                : [],
          ),
          child: Center(
            child: Text(
              'Click Me!',
              style: TextStyle(fontSize: 20.0),
            ),
          ),
        ),
      ),
    );
  }
}

2.显式动画

import 'package:flutter/material.dart';

class ShadowAnimationExplicit extends StatefulWidget {
  const ShadowAnimationExplicit({super.key});

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

class _ShadowAnimationExplicitState extends State<ShadowAnimationExplicit>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  bool _isShadowed = false;

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500));
    super.initState();
  }

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

  void _toggleShadow() {
    if (_isShadowed) {
      _controller.reverse();
    } else {
      _controller.forward();
    }
    setState(() {
      _isShadowed = !_isShadowed;
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _toggleShadow,
      child: TweenAnimationBuilder(
        tween: Tween(begin: 0.0, end: _isShadowed ? 1.0 : 0.0),
        duration: Duration(milliseconds: 500),
        builder: (_, double value, __) {
          return Center(
            child: Container(
              height: 200.0,
              width: 200.0,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(100.0),
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.5),
                    spreadRadius: 4 * value,
                    blurRadius: 7 * value,
                    offset: Offset(0, 3 * value),
                  )
                ],
              ),
              child: Center(
                child: Text(
                  'Click Me!',
                  style: TextStyle(fontSize: 20.0),
                ),
              ),
            ),
          );
        },
      ),
    );
  }
}

要全套代码请加V:sunyan414361110 一起学习flutter鸭