buildTransitions method Null safety

Override this method to wrap the child with one or more transition widgets that define how the route arrives on and leaves the screen.

By default, the child (which contains the widget returned by buildPage) is not wrapped in any transition widgets.

The buildTransitions method, in contrast to buildPage, is called each time the Route's state changes while it is visible (e.g. if the value of canPop changes on the active route).

The buildTransitions method is typically used to define transitions that animate the new topmost route's comings and goings. When the Navigator pushes a route on the top of its stack, the new route's primary animation runs from 0.0 to 1.0. When the Navigator pops the topmost route, e.g. because the use pressed the back button, the primary animation runs from 1.0 to 0.0.

PageRouteBuilder<void>(
  pageBuilder: (BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
  ) {
    return Scaffold(
      appBar: AppBar(title: const Text('Hello')),
      body: const Center(
        child: Text('Hello World'),
      ),
    );
  },
  transitionsBuilder: (
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child,
   ) {
    return SlideTransition(
      position: Tween<Offset>(
        begin: const Offset(0.0, 1.0),
        end: Offset.zero,
      ).animate(animation),
      child: child, // child is the value returned by pageBuilder
    );
  },
)

When the Navigator pushes a route on the top of its stack, the secondaryAnimation can be used to define how the route that was on the top of the stack leaves the screen. Similarly when the topmost route is popped, the secondaryAnimation can be used to define how the route below it reappears on the screen. When the Navigator pushes a new route on the top of its stack, the old topmost route's secondaryAnimation runs from 0.0 to 1.0. When the Navigator pops the topmost route, the secondaryAnimation for the route below it runs from 1.0 to 0.0.

PageRouteBuilder<void>(
  pageBuilder: (BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
  ) {
    return Scaffold(
      appBar: AppBar(title: const Text('Hello')),
      body: const Center(
        child: Text('Hello World'),
      ),
    );
  },
  transitionsBuilder: (
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child,
  ) {
    return SlideTransition(
      position: Tween<Offset>(
        begin: const Offset(0.0, 1.0),
        end: Offset.zero,
      ).animate(animation),
      child: SlideTransition(
        position: Tween<Offset>(
          begin: Offset.zero,
          end: const Offset(0.0, 1.0),
        ).animate(secondaryAnimation),
        child: child,
      ),
     );
  },
)

In practice the secondaryAnimation is used pretty rarely.

The arguments to this method are as follows:

• context: The context in which the route is being built.
• animation: When the Navigator pushes a route on the top of its stack, the new route's primary animation runs from 0.0 to 1.0. When the Navigator pops the topmost route this animation runs from 1.0 to 0.0.
• secondaryAnimation: When the Navigator pushes a new route on the top of its stack, the old topmost route's secondaryAnimation runs from 0.0 to 1.0. When the Navigator pops the topmost route, the secondaryAnimation for the route below it runs from 1.0 to 0.0.
• child, the page contents, as returned by buildPage.

See also:

• buildPage, which is used to describe the actual contents of the page, and whose result is passed to the child argument of this method.