Typedefs in Dart

Question

So I've been using typedefs in Dart for some time now without thinking about what they actually are. So for example in this piece of code:

new PageRouteBuilder(
  pageBuilder: (BuildContext context, Animation<double> animation1, Animation<double> animation2) => new Test(),
  transitionsBuilder: (BuildContext context, Animation<double> animation1, Animation<double> animation2, Widget child) {
    return new FadeTransition(
      child: child,
      opacity: animation1,
    );
  }
)

The pageBuilder property expects a typedef called RoutePageBuilder and for the transitionsBuilder property a typedef called RouteTransitionsBuilder is expected.

To me, it looks like I'm just using a function for those properties with predefined arguments from the typedef, but I'm uncertain about this.
Also, what arguments will actually be the input here? Because I've for example used Animation<double> animation1 as an argument but that does not actually create a new Animation, or does it? If it does not, what Animation will actually be passed as the argument?

Answer 1

A typedef can be used to specify a function signature that we want specific functions to match. A function signature is defined by a function’s parameters (including their types). The return type is not a part of the function signature. Its syntax is as follows.

In your case the PageRouteBuilder takes as parameters:

• pageBuilder RoutePageBuilder typedef - just a function that match with the RoutePageBuilder typedef signature.
• transitionsBuilder RouteTransitionsBuilder typedef - exactly as pageBuilder but matching the RouteTransitionsBuilder signature.

The two typedefs (RouteTransitionsBuilder and RoutePageBuilder) are like interfaces (of OO programming) for single methods. In this case the typedef RoutePageBuilder forces you to pass as parameter a function that returns a Widget taking the context and two Animation as parameters.

If you want more details about what are the parameters passed in that functions you can check it on the flutter's documentation, for example:

animation → Animation The animation that drives the route's transition and the previous route's forward transition. read-only, inherited

or

secondaryAnimation → Animation The animation for the route being pushed on top of this route. This animation lets this route coordinate with the entrance and exit transition of routes pushed on top of this route. read-only, inherited

PS: If you navigate through the flutter code and arrive in the routes.dart file you can find the comments that document this part:

/// Override this method to build the primary content of this route.
  ///
  /// The arguments have the following meanings:
  ///
  ///  * `context`: The context in which the route is being built.
  ///  * [animation]: The animation for this route's transition. When entering,
  ///    the animation runs forward from 0.0 to 1.0. When exiting, this animation
  ///    runs backwards from 1.0 to 0.0.
  ///  * [secondaryAnimation]: The animation for the route being pushed on top of
  ///    this route. This animation lets this route coordinate with the entrance
  ///    and exit transition of routes pushed on top of this route.
  ///
  /// This method is called when the route is first built, and rarely
  /// thereafter. In particular, it is not called again when the route's state
  /// changes. 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.
  Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation);

Answer 2

From the docs:

In Dart, functions are objects, just like strings and numbers are objects. A typedef, or function-type alias(is also known), gives a function type a name that you can use when declaring fields and return types. A typedef retains type information when a function type is assigned to a variable.

Example if you check the implementation of the RoutePageBuilder:

typedef RoutePageBuilder = Widget Function(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation); 

This means that RoutePageBuilder is also known as a Function that returns a Widget.

Then if you check the source code of PageRouteBuilder, you will find that the instance variable pageBuilder is of type RoutePageBuilder, therefore when creating a new instance of PageRouteBuilder you can do the following:

new PageRouteBuilder(
  pageBuilder: (BuildContext context, Animation<double> animation1, Animation<double> animation2) => new Test(),

Here new Test() is a widget.