CupertionFullscreenDialogTransition – All Cupertino Widgets
In this series, we look at the whole Cupertino package of Flutter. You will get to know every widget, crucial classes, and much more in this series. All the articles will be less than 2 minutes long, so you can read them every time :) In addition to that, they will be very easy to understand, following the motto
Make everything as simple as possible, but not simpler. ~ Albert Einstein
If you want to check out the other articles of this series, check out this list. Let’s get started!
CupertionFullscreenDialogTransition widget is the transition to summon full-screen dialogs with the iOS style.
First, we have our initial widget. There we have a button, ideally a
CupertinoButton, that pushes to a second screen. That’s easy, right?
The second screen is supposed to be a
StatefulWidget that also has the
TickerProviderStateMixin mixin. We need this for our animation.
We define two
_secondary) and two
initState method, we then give the
Animations a value. Lastly, we use the
_primary animation controller and call
forward. Now our
initState procedure is completed. Don‘t forget to dispose the controllers in the
Now let‘s finally get to our Widget build. We will return a
CupertinoFullscreenDialogTransition widget. Inside this, we set the
primaryRouteAnimation to our
_animationPrimary variable and the
secondaryRouteAnimation to our
Of course, you have to set a
child, which is just the normal widget you want to display. The last property we will take a look at is
linearTransition, which is a bool. You can specify with it if the transition is a linear transition or not.
Great, that’s everything we need to know, except… one tiny thing. When calling
Navigator.of(context).pop(), after the back button has been pressed, call
_primary.reverse() to get a nice reverse animation. Wrap your
Navigator.of(context).pop() into a
Future.delayed of the duration of your animation.
Now we know everything we need to know. It may sound complicated, but when looking at the example, it will be very easy to understand:
I know, I know, this is a huge code snippet, but after you’ve read through it, I am 100% sure that you have understood it!
Further reading & Conclusion
In this article, you have learned how to use the CupertionFullscreenDialogTransition widget.
Did you know that there are great packages that enhance your development enormously? For example, Freezed, Isar, or Flutter Hooks. If you want to learn about these great packages, I have entire tutorials about them. Check them out here.
In the following few articles, I will introduce more Cupertino widgets, essential classes, and more stuff. If you don’t want to miss this, I recommend you follow me!
Thanks for reading, have a nice day!
Flutter API CupertinoFullscreenDialogTransition
StackOverflow — How to use ‘CupertinoFullscreenDialogTransition’