Flutter: iOS NavigationBar Transition

Question

Is it possible to replicate this navigation bar transition effect using Cupertino Widgets?

I may not be using the widgets correctly.
And looking at some examples, I have not found any that shows exactly this effect.

Solution 1

If you want to have a slide transition like iOS, you use CupertinoPageRoute:

CupertinoPageRoute.
Navigator.push(
    context, CupertinoPageRoute(builder: (context) => Screen2()))

further you can see CupertinoPageRoute

There is also a widget known as PageView you can check. Maybe that would help

Solution 2

The simple answer is not currently. See this bug - it's something that's being considered by the flutter team but not currently implemented. It's in the Milestone they hope to complete by the 1.0 release (but that could be a while).

That being said, you could do it yourself with a bit of work. You could start with something like the answer here but animate the AppBar instead of the NavigationBar. Not a particularly pretty solution, but it would work.

Comments

[rmtmckenzie]

Oh and BTW if you use the CupertinoPageScaffold, CupertinoNavigationBar & CupertinoPageRoute it will get you everything except the cross-fade on the app bar (i.e. push from side, etc).

[bbjay]

For me that alone was not enough. I had to embed the first screen into a CupertinoTabView to make the navbar transition animation work correctly.