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