flutter - 将小部件动画化到其父级之外的位置(行/ ListView )

Question

我在行或 ListView 中有一个卡片小部件列表。单击这些卡片时，我想创建一种效果，让卡片变大并移动到屏幕中间，而屏幕的其余部分出现在灰色覆盖层下方。这些示例图像应该可以帮助您理解我要解释的内容。

图片 #1 - 在点击任何卡片之前列出

图片 #2 - 单击卡片后。该卡片的大小和位置动画到屏幕的中心。其他一切都变得黑暗。 (忽略糟糕的 Photoshop)。

我不是要完整的代码或任何东西，只是想知道是否可以将小部件移出其父级，并了解如何实现此效果。我知道 AnimatedContainer 可以用在卡片上让它变大，定位部分是需要帮助的。谢谢!

Answer 1

您可以在 Container() 上使用 transform: 参数

完整工作示例

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,
              ),
            ],
          ),
        )
      )
    );
  }
}

#2 动画可以通过使用 Hero() 小部件和 Overlay() 来完成。或者您可以使用自定义的 DialogBu​​ilder 一些建议来帮助您入门。