auto_route 2.0.0 is out!

[Milad-Akarie]

Hello everyone, I apology for not being active lately, it's because I've been working on AutoRoute 2.0.0.
working with nested routers is more friendly now, I hope you enjoy the update.

breaking changes

• Remove usesTabsRouter property from AutoRoute as it's no longer needed.
• onGenerateRoutes is now shortened to just routes and initial routes are no longer pass
• Legacy generator is completely dropped now.
• Remove all legacy generator related flags.

enhancements

• Bring back the good old await for pop results feature.
• The root AutoRouterDelegate can now be declarative.
• Push, replace and navigate will now bubble up if they can't be handled by the router they're called from.
• Enhance the navigate function to behave like navigating from the browser's bar.
• Add new methods to navigate by path pushNamed, replaceNamed and navigateNamed.
• Add AutoBackButton to handle nested routers popping with ease.
• Add some helper/shortcut methods to context extension, pushRoute, replaceRoute, navigateTo and popRoute.
• Add some helper methods to the RoutingController like popTop, topRoute and more.
• Pages will rebuild when an ancestor router updates if you depend on it.
• Add Auto RedirectRoute generation for Routes with none initial paths that's marked as initial.
• Add AutoRouteObserver to add tabs observing to the native observer.
• NavigatorObservers are now passed through a builder so nested navigators can inherit them.
• Add HeroControllerScope to nested AutoRouters
• Pomp up code_builder version to 4.0.0 and build_runner to 2.0.1
• Fix auto_router_generator failing on functions with Future<void> return type #458, [v1.0.2] Error: Getter not found when using enum as parameter with default value #456 setState after dispose #421 and Async return types in route parameters fails code generator #453
• Minor fixes and enhancements

[carlosfiori]

How to generate navigation helpers in this version?
Also, how to navigate without context, as early version like this: ExtendedNavigator.root.push('books_page');

[CassiusPacheco]

Awesome work! I've updated here on my side and it's working fine so far. Should we create a release on github too?

[ayushin]

Awesome work, but #421 is still broken :-(

[jlnrrg]

Great work. I am very much hyped for this 😍

The sentence Remove usesTabsRouter property from AutoRoute as it's no longer needed. is a little confusing, so you might want to clarify how the router now differentiates if its children are Tabs or just normally nested.
I assume the wiki will be updated accordingly and we all here are just super early 😄

[Milad-Akarie]

@jlnrrg Using The AutoTabsRouter widget is enough now, I just want it to decouple things.

[RicardoRB]

Great work! Thanks for your time in this project @Milad-Akarie !

[jlnrrg]

@Milad-Akarie did you leave the usesTabsRouter in the code to prevent breaking changes?
file line 162

[Milad-Akarie]

@jlnrrg nah I just missed it while cleaning up, I'll make sure it's removed.

[brizaldi]

Hi, I got this error after updating to v2.0.0

The argument type 'List<FirebaseAnalyticsObserver>' can't be assigned to the parameter type 'List<NavigatorObserver> Function()'.

[jlnrrg]

@brizaldi please share your code. It looks to me as if you try to assign a List to a Function that returns such Lists.

[brizaldi]

@jlnrrg this code works on the old version v1.0.2

MaterialApp.router(
        routerDelegate: _appRouter.delegate(
          navigatorObservers: [
            FirebaseAnalyticsObserver(
              analytics: getIt<FirebaseAnalytics>(),
            ),
          ],
        ),
       ...
);

Edit: nevermind, solved it after modify the code like this

navigatorObservers: () => [
  FirebaseAnalyticsObserver(
    analytics: getIt<FirebaseAnalytics>(),
  ),
],

[jlnrrg]

@brizaldi great to hear that you figured it out.

But I still argue for a documentation how to implement RouteObserver using auto_route and/or implementing an observer in the example project.
(I am aware that is brand new, don't worry 😄)

[hanssonduck]

@Milad-Akarie take your example above, is there a way to push the book details route above everything else? The pushed route should not be wrapped in the parent route.

[theweiweiway]

@essarn hey, thats a common use case:

you have a list view in a tab
you click on a details page
you want to push it on top of everything else

For me, i've used 2 possible solutions before:

1. Hide bottom navigation bar. Make your bottom navigation bar depend on the current path. That way, when u push the details page, the nav bar disappears.

or

2. Create a new navigation stack at the root level and push that whole stack ontop of the tab. The nav bar will not be visible in this case either since a whole new stack in pushed

I prefer option 1. However, if your Details page is going to be called in multiple places in ur app (like from other tabs), then option 2 is better

[hanssonduck]

@theweiweiway thanks for the quick answer but I have some further questions. I'm not a fan of the first solution because it doesn't animate nicely with the page transition and the second solution breaks the nice url structure you get with nested routes. So is there a way to move the details route to the root level but keep the parent's path prefix it would have had as a child?

[jlnrrg]

@essarn what speaks against pushing the route above the tabRouter
(for this you'd have to prepare the route at the same level of the tabRouter though)

[theweiweiway]

@essarn for the 1st solution, by not animating nicely do you mean the bottom navigation bar just disappears and re-appears?

To fix that I did

AnimatedOpacity(
  duration: Duration(milliseconds: 200),
  opacity: _isNavBarShowing() ? 1 : 0,
  child: BottomNavBar(),
)

so that the nav bar animates in and out. This might not be what you want if you want the transition to "cover" the navbar while animated in. If you want to "cover" the navbar, then you'd probably need a separate router. Not sure how to keep the same URL structure in that case though.

[axehai]

@Milad-Akarie can you please put this example-app repository up? The one with bottom navigation as shown in gif. It would be very helpful as I was lowkey struggling with even the old one, let alone with the new updates. Thank you so much.

[hanssonduck]

@akshayspeaks the example is here https://github.com/Milad-Akarie/auto_route_library/tree/master/auto_route/example/lib

[aashir-khan]

@Milad-Akarie

I don't quite understand what it means by

"onGenerateRoutes is now shortened to just routes..."

I'm currently doing

return MaterialApp(
      title: 'Dr. Words',
      theme: AppTheme.lightTheme,
      onGenerateRoute: AppRouter().onGenerateRoute,
      navigatorKey: StackedService.navigatorKey,
      debugShowCheckedModeBanner: false,
    );

but after upgrading to the latest version of this package, onGenerateRoute no longer exists on the AppRouter object and the routes field on it doesn't seem to correspond to anything in MaterialApp. Also please note that it is absolutely essential that I pass in the navigatorKey (as I am using the stacked_services package) so I can't switch to using MaterialApp.reactive

[aashir-khan]

Actually I figured it out, the stacked_services listing on pub.dev has some information about using its generated onGenerateRoute to accomplish the purpose. It seems that package preferred to implement auto_route internally to have one less package dependency.

[jlnrrg]

With the new implantation of route observer, did someone figure out, how to implement RouteAware.
The question is, if there is a helper method to acquire the Observer from the context.
AutoRouterObserver.of(context) for a example to then subscribe to it in an RouteAware widget like this:

example widget stolen from medium

import 'package:flutter/material.dart';

class RouteAwareWidget extends StatefulWidget {
  const RouteAwareWidget({Key? key, required this.child}) : super(key: key);
  final Widget child;

  @override
  State<RouteAwareWidget> createState() => RouteAwareWidgetState();
}

// Implement RouteAware in a widget's state and subscribe it to the RouteObserver.
class RouteAwareWidgetState extends State<RouteAwareWidget> with RouteAware {
  @override
  void didPopNext() {
    debugPrint('didPopNext');
  }

  /// Called when the current route has been pushed.
  @override
  void didPush() {
    debugPrint('didPush');
  }

  /// Called when the current route has been popped off.
  @override
  void didPop() {
    debugPrint('didPop');
  }

  /// Called when a new route has been pushed, and the current route is no
  /// longer visible.
  @override
  void didPushNext() {
    debugPrint('didPushNext');
  }


  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    
    routeObserver.subscribe(this, ModalRoute.of(context));  //<- how to obtain routeObserver?
  }

  @override
  void dispose() {
    routeObserver.unsubscribe(this);
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => widget.child;
}

[Milad-Akarie]

@jlnrrg I read your comment from the notifications and I just couldn't find it anymore lol
please open a new issue in future so I can easily track it.
any way I read your notification and I realized exposing the observers is a good idea so I did just that + added a little helper function to simplify things,
so in you case you wanna provide a RouteObserver then have access to it in one of child pages

  _routerScope = RouterScope.of(context)
    if(_routerScope != null) {
      // all observers
      _routerScope!.navigatorObservers;
      // or
      _routerScope!.firstObserverOfType<RouteObserver>()
          .subscribe(routeAware, route)
    }

does that fix your problem?

[Biomanuel]

Actually I figured it out, the stacked_services listing on pub.dev has some information about using its generated onGenerateRoute to accomplish the purpose. It seems that package preferred to implement auto_route internally to have one less package dependency.

I don't understand... Please, how exactly did you resolve the differences and the deprecated onGenerateRoute, because I am facing the same challenge here.

[aashir-khan]

I don't understand... Please, how exactly did you resolve the differences and the deprecated onGenerateRoute, because I am facing the same challenge here.

Over here you can see how the stacked package makes use of StackedRouter which comes from the generated app.router.dart file and if you look at that generated file, it actually imports auto_route package to make use of RouterBase so basically we don't need to install auto_route ourselves to use it, we can setup the navigation like how the stacked documentation explains it and then under the hood, stacked uses auto_route so we will be using it too

See the example here: https://github.com/FilledStacks/stacked/blob/master/packages/stacked_services/example/lib/main.dart

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions