模仿 iOS 13 全屏对话框

Question

我注意到在 iOS 13 中全屏对话框发生了变化，从底部动画引入了一个新的幻灯片。这是一个例子

是否可以用颤振来模仿这种行为？iOS 动画不是从底部简单的幻灯片，而是还涉及背景页面。

查看flutter文档，我找到了这个类，但是，没有任何示例，我无法理解如何使用它，或者它是否是我正在搜索的内容。

谢谢

Answer 1

更新：根据@VadimKo 的另一个答案，我现在明白可能还需要堆叠效果。链接到一个包modal_bottom_sheet的答案，我根据它更新了我的例子

如果我正确理解您的问题，您希望显示一个从底部向上滑动的全屏对话框，其 UI 类似于您图片中显示的 UI。

CupertinoFullscreenDialogTransition真的只是两个SlideTransition堆叠在一起所以没什么特别的。

您可以使用 showGeneralDialog

在这方面，你可以使用的组合显示任何东西pageBuilder和transitionBuilder。它非常灵活，甚至可以用于在当前路线之上显示完整路线。

如果你使用CupertinoFullscreenDialogTransition的pageBuilder应该实现自己的目标。不需要提供 atransitionBuilder因为它是由pageBuilder隐式执行的。

下面的示例尝试通过使用CupertinoApp,CustomScrollView和CupertinoSliverNavigationBar对话框的内容来模拟请求的 UI

更新：一个transitionBuilder类似于modal_bottom_sheet提供的可以用来添加堆叠效果。

DartPad 示例中的重要代码：

showGeneralDialog(
  barrierDismissible: true,
  barrierLabel: 'Settings',
  barrierColor: Colors.black,
  context: context,
  /// This would be slow but good to understand how transitions are working
  transitionDuration: const Duration(seconds: 1),
  /// Optionally provide the [transitionBuilder] to get the stacking effect 
  /// as of iOS 13
  transitionBuilder: (context, animation, secondaryAnimation, child) {
    /// The following transition widget was inspired from `modal_bottom_sheet` package
    /// Some modifications have been made to remove certain limitations,
    /// See the full DartPad example or take a look at `modal_bottom_sheet`
    return _CupertinoModalTransition(
      animation: animation,
      child: child,
      /// This renders the current widget behind the modal
      /// Notice the use of [this], it is to make sure correct context is used
      behindChild: this.build(this.context),
    );
  },
  pageBuilder: (context, animation, secondaryAnimation) {
    /// This is the simplest use case for [CupertinoFullscreenDialogTransition]
    /// This provides the slide up and slide down transition effects
    return CupertinoFullscreenDialogTransition(
      primaryRouteAnimation: animation,
      secondaryRouteAnimation: secondaryAnimation,
      /// Content of your dialog
      child: Container(),
      linearTransition: true,
    );
  },
);

DartPad 完整示例：https ://dartpad.dev/57de88ce8d64dff9d3e6fe0627a8b654

更新：DartPad 示例的工作原理与现有代码类似，modal_bottom_sheet但无需对现有代码进行任何更改，例如要求使用MaterialWithModalsPageRoute或包装当前/预览路由，CupertinoScaffold这两者都由同一包提供。

预览：

看GIF预览：https : //i.imgur.com/mZ77M62.gifv

注意：showCupertinoDialogflutter 团队已经提供了，但它没有提供那么多的灵活性。然而，它可以用于通常不占用全屏空间的普通小对话框弹出窗口。