如何在不改变容器高度和宽度的情况下在颤动容器内设置图像大小的动画

Question

我正在尝试将动画应用于颤动的 AnimatedContainer 小部件内的图像大小，而不更改容器的高度和宽度。

但是，在下面的代码中，我可以通过改变容器的高度和宽度来实现这一点。而我希望容器的高度和宽度应该是固定的，并且动画应该只应用于图像大小。

有没有办法通过固定的容器高度和宽度来实现这一点？

import 'package:flutter/material.dart';

class ScaleAnimation extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Scale Animation")),
      body: ImageAnimation(),
    );
  }
}

class ImageAnimation extends StatefulWidget {
  @override
  _ImageAnimationState createState() => _ImageAnimationState();
}

class _ImageAnimationState extends State<ImageAnimation> {
  bool isTapped = false;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
        onTap: () {
          setState(() {
            isTapped = !isTapped;
          });
        },
        child: AnimatedContainer(
          height: isTapped ? 350.0 : 300.0,
          width: isTapped ? 350 : 300.0,
          alignment:
              isTapped ? Alignment.center : AlignmentDirectional.topCenter,
          duration: Duration(seconds: 2),
          curve: Curves.fastOutSlowIn,
          margin: EdgeInsets.fromLTRB(50.0, 100.0, 50.0, 100.0),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            boxShadow: [
              BoxShadow(
                color: Colors.black54,
                blurRadius: 100.0, // soften the shadow
              )
            ],
            image: DecorationImage(
                image: NetworkImage(
                    'https://dictionary.cambridge.org/images/thumb/cup_noun_002_09489.jpg'),
                fit: BoxFit.cover),
          ),
        ),
      ),
    );
  }
}

Answer 1

这行得通

class ImageAnimation extends StatefulWidget {
  @override
  _ImageAnimationState createState() => _ImageAnimationState();
}

class _ImageAnimationState extends State<ImageAnimation> {
  bool isTapped = false;
  @override
  Widget build(BuildContext context) {
    return Center(
      child: GestureDetector(
        onTap: () {
          setState(() {
            isTapped = !isTapped;
          });
        },
        child: Container(
          height: 200,
          width: 200,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(10),
            boxShadow: [
              BoxShadow(
                color: Colors.black54,
                blurRadius: 100.0, // soften the shadow
              )
            ],
          ),
          child: Center(
            child: AnimatedContainer(
              height: isTapped ? 200.0 : 100.0,
              width: isTapped ? 200 : 100.0,
              duration: Duration(seconds: 2),
              curve: Curves.fastOutSlowIn,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(
                      'https://dictionary.cambridge.org/images/thumb/cup_noun_002_09489.jpg'),
                  fit: BoxFit.cover,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}