Issue
I noticed that in iOS 13 full screen dialog has changed, introducing a new slide from bottom animation.
Here is an example
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
Solution
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 SlideTransition
s 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:
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.
Answered By – user6552940
Answer Checked By – Katrina (FlutterFixes Volunteer)