RouteWidget constructor

RouteWidget({ Widget builder(Widget routerOutlet)?, Map<String, Widget Function(RouteData data)> routes = const {}, Widget transitionsBuilder(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation, Widget child,)?, bool? delegateImplyLeadingToParent, })

Widget use to define sub routes or just for better organization or add custom transition to a particular route.

For example let's take this routes

 final myNavigator = NavigationBuilder.create(
   routes: {
     '/': (_) => HomePage(),
     '/Page1': (_) => Page1(),
     '/Page1/:id': (data) => Page1(id: data.pathParam['id']),
     '/Page1/page12': (_) => Page12(),
   },
 );

The above routes definition can be written like this:

 final myNavigator = NavigationBuilder.create(
   routes: {
     '/': (_) => HomePage(),
     '/Page1': (_) => RouteWidget(
           routes: {
             '/': (_) => Page1(),
             '/:id': (data) => Page1(id: data.pathParam['id']),
             '/page12': (_) => Page12(),
           },
         )
   },
 );

You can also use the builder property to wrap the route outlet widget inside an other widget.

 final myNavigator = NavigationBuilder.create(
   routes: {
     '/': (_) => HomePage(),
     '/Page1': (_) => RouteWidget(
           // Inside widget tree, you can get the router outlet widget using
           // `context.routerOutlet`
           builder: (routeOutlet) {
              // If you extract this Scaffold to a Widget class, you do not
              // need to use the Builder widget
             return Scaffold(
               appBar: AppBar(
                 title: OnReactive( // It reactive to routeData
                   () => Builder( // Needed only to get a child BuildContext
                     builder: (context) {
                       final location = context.routeData.location;
                       return Text('Routing to: $location');
                     },
                   ),
                 ),
               ),
               body: routeOutlet,
             );
           },
           routes: {
             '/': (_) => Page1(),
             '/:id': (data) => Page1(id: data.pathParam['id']),
             '/page12': (_) => Page12(),
           },
         )
   },
 );

Inside widget tree, you can get the router outlet widget using context.routerOutlet

RouteWidget can be just used to add custom page transition animation.

In the following example Page1 will be animated using the custom definition, whereas all other pages will use the default animation.

 final myNavigator = NavigationBuilder.create(
   // Default transition
   transitionDuration: RM.transitions.leftToRight(),
   routes: {
     '/': (_) => HomePage(),
     '/Page1': (_) => RouteWidget(
           builder: (_) => Page1(),
           // You can use one of the predefined transitions
           transitionsBuilder: (context, animation, secondAnimation, child) {
             // Custom transition implementation
             return ...;
           },
         ),
     '/page2': (_) => Page2(),
   },
 );

See Also RouteData and NavigationBuilder

Implementation

RouteWidget({
  this.builder,
  Map<String, Widget Function(RouteData data)> routes = const {},
  this.transitionsBuilder,
  this.delegateImplyLeadingToParent,
  // Key? key,
})  : assert(builder != null || routes.isNotEmpty),
      assert(NavigationBuilderImp.ignoreSingleRouteMapAssertion ||
          routes.isEmpty ||
          routes.length > 1),
      _parentToSubRouteMessage =
          ParentToSubRouteMessage.parentToSubRouteMessage,
      _routes = RouterObjects.transformRoutes(routes),
      _routeKeys = routes.keys.toList(),
      _hasBuilder = builder != null,
      _delegateImplyLeadingToParent =
          delegateImplyLeadingToParent ?? builder == null,
      _transitionDuration =
          transitionsBuilder != null ? _Navigate._transitionDuration : null,
      super(
        key: Key(
          ParentToSubRouteMessage.parentToSubRouteMessage.signature,
        ),
      );