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!

Happy reading!

CupertinoFullscreenDialogTransition

The 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 AnimationControllers (_primary and _secondary) and two Animation<double>s (_animationPrimary and _animationSecondary).

In our initState method, we then give the AnimationControllers and 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 dispose method.

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 _animationSecondary.

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: