CupertinoPageTransition — All Cupertino Widgets

In this series, we look at the whole Cupertino package of Flutter. You will get to know every widget, important 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 effortless 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!

CupertinoPageTransition

With the CupertinoPageTransition widget you can get a page transition like in a “normal” iOS application. It is very easy to implement, so let’s dive into it:

The only property/method you need is builder. With this, you return the underlying screen that it should show after the transition. But okay, that is very basic. But where can you implement this widget now?

Let’s say you have two screens, the first one is where you click on a button and navigate to the second screen. You do the navigation with Navigator.of(context).push(<Route>). And our <Route> is the important part.

We specify a static route in our second screen and return our CupertinoPageTransition.

Now we can call Navigator.of(context).push(SecondScreen.route). And that’s it!

To understand better what I’ve explained right now, let’s take a look at the code:

Yep, that’s all. It’s that simple!

Further reading & Conclusion

In this article, you have learned how to use the CupertinoPageTransition 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!