Difference between pageBuilder and transitionsBuilder typedef parameters of PageRouteBuilder


According to the official docs the pageBuilder parameter is used to build the primary route content and the transitionsBuilder parameter is used to build the route’s transition.

So both of them have different jobs but if pageBuilder is use to build the primary route content then why it also declares two Animation parameter in its typedef RoutePageBuilder, also in the transitionBuilder typedef RouteTransitionBuilder, there are two Animation parameters declared animation and secondaryAnimation.
What is the difference between those two Animations and how we can use them?


The docs in routes.dart:

  /// [buildPage] is only called when the route is first built, and rarely
  /// thereafter. In particular, it is not automatically called again when the
  /// route's state changes unless it uses [ModalRoute.of]. For a builder that
  /// is called every time the route's state changes, consider
  /// [buildTransitions]. For widgets that change their behavior when the
  /// route's state changes, consider [ModalRoute.of] to obtain a reference to
  /// the route; this will cause the widget to be rebuilt each time the route
  /// changes state.
  /// In general, [buildPage] should be used to build the page contents, and
  /// [buildTransitions] for the widgets that change as the page is brought in
  /// and out of view. Avoid using [buildTransitions] for content that never
  /// changes; building such content once from [buildPage] is more efficient.

  /// The [buildTransitions] method, in contrast to [buildPage], is called each
  /// time the [Route]'s state changes (e.g. the value of [canPop]).
  /// 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.

Answered By – StephenLau

Answer Checked By – Katrina (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.