Flutter 打开带有动画的对话框

Question

我正在开发一个移动应用程序，我想通过一些很酷的对话框动画来改善用户体验，并且我不想只使用简单的弹出对话框。

基本上我想要的结果是这样的：

网上搜索了一下，发现了类似的问题：Animation with Hero and showDialog in flutter。

我尝试开发一些东西，结果如下：

我不知道如何重现容器中的东西。也许在正确的动画（第一张图片）中，他们放置了一个不可见的小对话框，一旦按下按钮，它就会与动画一起出现？

我应该在哪里输入对话框的信息？

这是我使用的代码：

Stack(
      children: [
        Positioned(
          child: GoogleMap(
            initialCameraPosition: CameraPosition(
              target: LatLng(10, 10),
            ),
          ),
        ),
        Positioned(
          child: Container(
            height: 100,
            width: w,
            color: Colors.white,
          ),
        ),
        Positioned(
          child: Padding(
            padding: const EdgeInsets.only(top: 50),
            child: Align(
              alignment: Alignment.topCenter,
              child: GestureDetector(
                child: AnimatedContainer(
                  height: _h,
                  width: _w,
                  color: Colors.lightGreen,
                  duration: Duration(seconds: 1),
                  child: Center(
                    child: Text(
                      'Title',
                    ),
                  ),
                ),
                onTap: () {
                  setState(() {
                    _h = 200;
                    _w = w * 0.9;
                  });
                },
              ),
            ),
          ),
        ),
      ],
    ),

Answer 1

我建议您使用官方动画包中的容器转换过渡模式https://pub.dev/packages/animations

预览：https://github.com/flutter/packages/raw/master/packages/animations/example/demo_gifs/container_transform_lineup.gif