0

I was trying to implement a bottom-tab navigation with 3 tabs in my home screen for my flutter website project. Currently I'm using go_router package for flutter web routing.

Following is my code for web app navigation, What I want to achieve is ontap of particular bottom tab 1 tap. I want to change the url to something like <Web_URL>/#Tab1.

But, I couldn't found anything useful. Can anyone please help?

static final List<GoRoute> _appRoutes = [
    GoRoute(
        path: AppRouter.pathLogin,
        builder: (BuildContext context, GoRouterState state) =>
            const LoginScreen()),
    GoRoute(
      path: AppRouter.pathHome,
      builder: (BuildContext context, GoRouterState state) =>
          const HomeScreen(),
      routes: [
        GoRoute(
            path: AppRouter.pathCreateContact,
            builder: (BuildContext context, GoRouterState state) =>
                const CreateContactScreen()),
      ],
    ),
  ];

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
        title: 'Follow-Up',
        debugShowCheckedModeBanner: false,
        routeInformationParser: _router.routeInformationParser,
        routeInformationProvider: _router.routeInformationProvider,
        routerDelegate: _router.routerDelegate);
  }

  final GoRouter _router = GoRouter(
      routes: _appRoutes,
      urlPathStrategy: UrlPathStrategy.path,
      initialLocation: FirebaseAuth.instance.currentUser != null
          ? AppRouter.pathHome
          : AppRouter.pathLogin);
Jay Mungara
  • 6,663
  • 2
  • 27
  • 49
  • are you saying you want to open a web view after navigating to that page? – LeXeR Sep 17 '22 at 07:39
  • @LeXeR This project is in flutter web. So currently, when i open my project the web URL is like, http://localhost:8000/ So, what I want to achieve is on tap of my bottom tab Settings. I want web url like, http://localhost:8000/#settings-tab – Jay Mungara Sep 17 '22 at 07:51
  • its like this, using router you navigate to a class, in your case its home/login etc. You need to create similar class with a web view. in that web view you load this url. Because router dosent know anything about url's. It just knows classes. – LeXeR Sep 17 '22 at 07:57
  • @LeXeR Let me know if there is anyway we can configure the requirement flutter way. – Jay Mungara Sep 19 '22 at 13:32

1 Answers1

1

You can use Shell Route. Please take a look at the following example, its exactly what you might need. https://github.com/flutter/packages/blob/main/packages/go_router/example/lib/shell_route.dart

Aditya Arora
  • 351
  • 2
  • 7