我如何为在特定条件下出现的小部件设置动画

Question

当前，网格会根据在指定高度（背景模糊）所单击的内容打开每个图像URL。我知道要从网格中的位置进行动画制作并使其增长并不容易，因为如果_showPreview为true，它将显示一个新的小部件。

但是，当_showPreview设置为true时，我有什么办法可以扩大/扩展图像预览，而不仅仅是单击显示。

class _GalleryState extends State<Gallery> {
  bool _showPreview = false;
  String _image = '';
  var _controller = ScrollController();
  ScrollPhysics _physics = ClampingScrollPhysics();

  @override
  void initState() {
    super.initState();
    _controller.addListener(() {
      if (_controller.position.pixels <= 56)
        setState(() => _physics = ClampingScrollPhysics());
      else
        setState(() => _physics = BouncingScrollPhysics());
    });
  }

  @override
  Widget build(BuildContext context) {
    List<String> imageType = widget.imageCategory;
    return SafeArea(
      child: Stack(
        children: [
          Column(
            children: [
              Expanded(
                flex: 1,
                child: Container(
                  width: double.infinity,
                  child: Stack(
                    children: [
                      ShaderMask(
                        shaderCallback: (rect) {
                          return LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            colors: [Colors.black, Colors.transparent],
                          ).createShader(
                              Rect.fromLTRB(0, 0, rect.width, rect.height));
                        },
                        blendMode: BlendMode.dstIn,
                        child: Container(
                          width: double.infinity,
                          child: Hero(
                            tag: '${widget.title}',
                            child: Image.asset(
                              widget.imageHeader,
                              fit: BoxFit.cover,
                            ),
                          ),
                        ),
                      ),
                      Align(
                        alignment: Alignment(-.7, .7),
                        child: Text(
                          widget.title,
                          style: TextStyle(
                              fontFamily: 'Roboto',
                              fontWeight: FontWeight.normal,
                              decoration: TextDecoration.none,
                              color: Colors.white,
                              fontSize: 30),
                        ),
                      ),
                      Align(
                        alignment: Alignment.topLeft,
                        child: GestureDetector(
                          onTap: () {
                            Navigator.pop(context);
                          },
                          child: Material(
                            color: Colors.transparent,
                            child: Icon(
                              Icons.arrow_back,
                              color: Colors.white70,
                              size: 40,
                            ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Expanded(
                flex: 5,
                child: Card(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(40),
                      topRight: Radius.circular(40),
                    ),
                  ),
                  child: Stack(
                    children: [
                      Padding(
                        padding: const EdgeInsets.only(top: 20.0),
                        child: GridView.builder(
                          controller: _controller,
                          physics: _physics,
                          itemCount: imageType.length,
                          gridDelegate:
                              SliverGridDelegateWithFixedCrossAxisCount(
                                  crossAxisCount: 3),
                          itemBuilder: (BuildContext context, int index) {
                            return GestureDetector(
                              onTap: () {
                                setState(() {
                                  _showPreview = true;
                                  _image = "${imageType[index]}";
                                  print('${imageType[index]}');
                                });
                              },
                              child: Padding(
                                padding: const EdgeInsets.all(4.0),
                                child: Card(
                                  elevation: 4,
                                  shape: RoundedRectangleBorder(
                                    borderRadius: BorderRadius.circular(5.0),
                                  ),
                                  clipBehavior: Clip.hardEdge,
                                  child: CachedNetworkImage(
                                    fit: BoxFit.cover,
                                    imageUrl: "${imageType[index]}",
                                    placeholder: (context, url) =>
                                        SpinKitCubeGrid(
                                      color: Colors.deepOrange[900],
                                    ),
                                    errorWidget: (context, url, error) =>
                                        new Icon(Icons.error),
                                  ),
                                ),
                              ),
                            );
                          },
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
          if (_showPreview) ...[
            GestureDetector(
              onTap: () {
                setState(() {
                  _showPreview = false;
                });
              },
              child: BackdropFilter(
                filter: ImageFilter.blur(
                  sigmaX: 5.0,
                  sigmaY: 5.0,
                ),
                child: Container(
                  color: Colors.white.withOpacity(0.6),
                ),
              ),
            ),
            GestureDetector(
              onTap: () {
                setState(() {
                  _showPreview = false;
                });
              },
              child: Container(
                child: Center(
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(10.0),
                    child: CachedNetworkImage(
                      fit: BoxFit.cover,
                      imageUrl: _image,
                      placeholder: (context, url) => SpinKitCubeGrid(
                        color: Colors.deepOrange[900],
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ],
        ],
      ),
    );
  }
}