Flutter中页面之间的对角帘状过渡

Question

我正在尝试让Flutter在页面之间进行特殊的过渡，比如here - 两个元素打开一个像对角窗帘一样的空间，那里应该是新的页面。

我可以成功构建屏幕，甚至可以制作动画。但不幸的是，我无法在窗帘下显示新页面。只有一个空的空间，一旦完成动画，就会发生实际的转换。

如何在动画发生之前显示第二页，当窗帘开始打开屏幕已经存在？

Here is link to the code I use

Answer 1

而不是Navigator.pushNamed(context, '/somewhere'); 您可以在路由时添加淡入淡出过渡。

导航时使用以下代码 -

Navigator.of(context).push(
            new PageRouteBuilder(
              pageBuilder: (_, __, ___) => new YourWidgetClass(),
              transitionsBuilder: (context, animation, secondaryAnimation, child) =>
                new FadeTransition(opacity: animation, child: child),
              ) ,
            )

Answer 2

我认为您应该在第二个屏幕中创建精确的对角窗帘，然后在没有任何动画的情况下过渡到第二个屏幕，由于渲染的视图将是相同的，因此用户不会注意到，然后打开窗帘。瞧！您的视图已经在那里。

您可以在此处找到示例

Diagonal Curtain example