Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Mimic iOS 13 fullscreen dialog

I noticed that in iOS 13 full screen dialog has changed, introducing a new slide from bottom animation. Here is an example

enter image description here

Is it possible to mimic this behaviour with flutter? iOS animation it's not a simple slide from bottom but involves also the background page.

Looking throught flutter documentation I found this class but, without any example I can't understand how to use it or if it's what I'm searching.

Thanks

like image 645
justAnotherOverflowUser Avatar asked Nov 21 '19 04:11

justAnotherOverflowUser


People also ask

How to enable full screen incoming calls in iOS 14?

How to Enable Full Screen Incoming Calls in iOS 14 1 Open the Settings app on your iOS 14 device 2 Scroll down and tap on Phone. 3 Tap on Incoming Calls. 4 Select Full Screen.

How to make the view controller full screen in iOS 13?

Initially, the default value is fullscreen for modalPresentationStyle, but in iOS 13 its changes to the UIModalPresentationStyle.automatic. If you want to make the full-screen view controller you have to change the modalPresentationStyle to fullScreen.

Does the iOS 13 simulator still default to full screen?

In the past, Apple has often changed defaults only becoming active once you are linking against the current SDK. We will hopefully get the old behavior when linking against previous versions. I can confirm that Xcode-10 built apps run on the iOS 13 simulator do still default to full screen.

How to force the fullscreen card presentation in iOS 13?

With iOS 13, as stated in the Platforms State of the Unionduring the WWDC 2019, Apple introduced a new default card presentation. In order to force the fullscreen you have to specify it explicitly with: let vc = UIViewController() vc.modalPresentationStyle =.fullScreen //or.overFullScreen for transparency


1 Answers

Update: Based on another answer by @VadimKo, I now understand that the stacking effect might also be desired. The answer linked to a package modal_bottom_sheet based on which I have updated my example

If I'm understanding your question right, you want to show a full screen dialog that slides up from the bottom and has UI similar to the one showed in your picture.

CupertinoFullscreenDialogTransition is really just two SlideTransitions stacked up so it's nothing special.

You could achieve something close to the posted images by using showGeneralDialog

In that, you could show anything using the combination of pageBuilder and transitionBuilder. It's very flexible and can even be used to show full routes on top of current route.

If you use CupertinoFullscreenDialogTransition as the pageBuilder it should achieve your goal. It's not required to provide a transitionBuilder since it's being performed by the pageBuilder implicitly.

The following example tries to mimic requested UI by using CupertinoApp, CustomScrollView and CupertinoSliverNavigationBar for the content of the dialog

Update: A transitionBuilder similar to the one provided by modal_bottom_sheet can be used to add the stacking effect.

Important code from the DartPad example:

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 Full example : https://dartpad.dev/57de88ce8d64dff9d3e6fe0627a8b654

Update: The DartPad example works just like modal_bottom_sheet but without any need to make changes to existing code such as the requirement to use MaterialWithModalsPageRoute or to wrap current/preview routes in CupertinoScaffold both of which are provided by the same package.

Preview:

Preview

See the GIF preview: https://i.imgur.com/mZ77M62.gifv

Note: There is already showCupertinoDialog provided by the flutter team but it doesn't provide as much flexibility. It can however be used for normal small dialog popups that don't usually take full screen space.

like image 181
user6552940 Avatar answered Sep 19 '22 10:09

user6552940