Flutter:如何使卡片扩展到整个屏幕

Question

我在gridview中有一些卡。我想要任何卡的ontap，它们应该扩展到整个屏幕。

这是卡片，

由于机密性，必须删除图像

我希望他们像这样扩展到整个屏幕，

我试过的，

->我试过使用OpenContainer小部件

->自定义英雄动画

但他们都使用pageroute，但我希望他们在没有页面路由的情况下这样做，因为有一些像appbar这样的内容对两个屏幕来说都是一样的，所以我不希望他们每次用户点击任何一张卡时都重建它。如果有人能把我带到正确的方向，那将是很棒的

Answer 1

看看这个包：https://pub.dev/packages/animations

如果您不喜欢使用pageroute，您可以使用StatefulWidget和Visibility切换小部件。

用InkWell包装Card，然后使用onTap / onPressed回调设置更改状态，使Visibility现在开始工作

1. 创建一个函数

Widget transition(Widget _child) {
return PageTransitionSwitcher(
duration: const Duration(milliseconds: 800),
transitionBuilder: (
Widget child,
Animation<double> animation,
Animation<double> secondaryAnimation,
) {
return SharedAxisTransition(
child: child,
animation: animation,
secondaryAnimation: secondaryAnimation,
transitionType: SharedAxisTransitionType.horizontal,
);
},
child: _child,
);
}

2. 将其添加到您的脚手架上：

transition(child:condition ? widget_1 : widget_2);

Answer 2

我不能100%确定你所说的扩展到整个屏幕是什么意思，但你可能需要使用Hero((小部件，用Hero()小部件包装你想要扩展的每个小部件，并给它一个tag: 'spo2'。例如，为第二个图像制作一个新屏幕，用Hero(。

如需进一步阅读，请查看https://api.flutter.dev/flutter/widgets/Hero-class.html

Answer 3

尝试使用对话并为开场设置动画。