0

I decided to use the auto_route library to implement navigation in an application that uses botton_navigation_bar

However, I can't figure out how to use navigation with parameters in the path.

Let me explain with an example: there is a bottomnavigationbar with the first home tab. when you click on one of its elements (products), you can "fall through" to a page with detailed information about the product

@RoutePage(name: 'EmptyHomeRouter')
class EmptyHomeRouterPage extends AutoRouter {
  const EmptyHomeRouterPage({super.key});
}

@AutoRouterConfig(replaceInRouteName: 'Page,Route')
class AppRouter extends _$AppRouter {
  @override
  List<AutoRoute> get routes => [
        AutoRoute(
          page: MainRoute.page,
          initial: true,
          path: '/',
          children: [
            AutoRoute(
              path: 'home',
              page: EmptyHomeRouter.page,
              children: [
                AutoRoute(path: '', page: HomeRoute.page),
                AutoRoute(path: ':id', page: ProductRoute.page),
              ],
            )
...

Product page:

@RoutePage()
class ProductPage extends StatelessWidget {
  const ProductPage({
    Key? key,
    @PathParam() required this.id,
  }) : super(key: key);

  final int id;
...

If use the line below, then everything works, go to the product page

context.router.push(ProductRoute(id: product.id));

However, I can't figure out how to use named navigation through paths. Does not work:

context.router.pushNamed('/home/${id}')

How can I use ...named methods for navigation and set parameters to new page. Thks

0 Answers0