Flutter 将小部件动画设置到其外部的位置'；s父级（行/列表视图）

我在一行或列表视图中有一个卡片小部件列表。当点击这些卡片时，我想创建一个效果，使卡片增长并移动到屏幕中间，屏幕的其余部分显示在灰色覆盖层下面。 这些示例图像应该可以帮助您理解我试图解释的内容

图#1-点击任何卡片前的列表

图#2-单击卡片后。该卡的大小和位置都以屏幕中心为动画。其他一切都变暗了。（忽略坏的Photoshop）

---

我不是要完整的代码或其他什么，只是想知道是否有可能将一个小部件移到其父部件之外，并了解如何实现这种效果。我知道可以在卡片上使用AnimatedContainer使其增长，定位部分需要帮助。谢谢

您可以在

容器（）上使用
转换：
参数

完整的工作示例

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          color: Colors.black87,
          margin: EdgeInsets.only(top: 100),
          child: Row(
            children: <Widget>[
              Container(
                margin: EdgeInsets.symmetric(horizontal: 16),
                transform: Matrix4.translationValues(0, 50, 0),
                color: Colors.red,
                height: 100,
                width: 100,
              ),
              Container(

                margin: EdgeInsets.symmetric(horizontal: 16),
                color: Colors.red,
                height: 100,
                width: 100,
              ),
              Container(

                margin: EdgeInsets.symmetric(horizontal: 16),
                color: Colors.red,
                height: 100,
                width: 100,
              ),
            ],
          ),
        )
      )
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
家：脚手架(
主体：容器(
颜色：颜色。黑色87，
页边距：仅限边缘集（顶部：100），
孩子：排(
儿童：[
容器(
边缘：边缘组。对称（水平：16），
转换：矩阵4.转换值（0,50,0），
颜色：颜色，红色，
身高：100，
宽度：100，
),
容器(
边缘：边缘组。对称（水平：16），
颜色：颜色，红色，
身高：100，
宽度：100，
),
容器(
边缘：边缘组。对称（水平：16），
颜色：颜色，红色，
身高：100，
宽度：100，
),
],
),
)
)
);
}
}

#2动画可以通过使用
Hero（）
小部件和
Overlay（）
来完成。或者，您可以使用一个自定义的
对话框生成器
来开始