flutter: animate transition to named route

flutter flutter-animation
lhk picture lhk · Jun 27, 2019 · Viewed 8.8k times · Source

When I use Navigator.pushNamed(context, "/someRoute");, there is a minimal animation which slides in the new route from the bottom of the screen (on Android, might look different on iOS).

How can I add a custom animation to this transition?

I found this article, which has some very neat sample code for unnamed routes. They implement their own class which inherits from PageRouteBuilder and can be used like this: Navigator.push(context, SlideRightRoute(page: Screen2())). But a PageRouteBuilder is not a Widget and can't be registered as a route in MaterialApp. So I don't see how to apply this to named routes.

Answer

CopsOnRoad picture CopsOnRoad · Jun 27, 2019

You need to use onGenerateRoute in your MaterialApp widget.

onGenerateRoute: (settings) {
  if (settings.name == "/someRoute") {
    return PageRouteBuilder(
      pageBuilder: (_, __, ___) => SomePage(),
      transitionsBuilder: (_, a, __, c) => FadeTransition(opacity: a, child: c)
    );
  }
  // unknown route
  return MaterialPageRoute(builder: (_) => UnknownPage());
},

Related questions

Programmatically scrolling to the end of a ListView

I have a scrollable ListView where the number of items can change dynamically. Whenever a new item is added to the end of the list, I would like to programmatically scroll the ListView to the end. (e.g., something like …

Read More
Horizontally scrollable cards with Snap effect in flutter

I want to create a list of cards scrolling horizontally with snap to fit effect when swiped either from left or right. Each card has some spacing between them and fit to screen similar to below image Apart from that …

Read More
How to add asset image in app bar as an action icon in Flutter application?

Problem I am trying to add a logout image icon in appbar of flutter screen. I have created a asset folder and created directories images/icons/ and placed icons in them. I have mentioned them in pubspec.yaml file. I …

Read More