Question 208320 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter routing in web as single page application

I have a dashboard on web. Which have common layout like sidemenu on web and on change its view will reflect.

I have setup route like this

final GoRouter _router = GoRouter(routes: <RouteBase>[
  GoRoute(
    path: '/',
    builder: (BuildContext context, GoRouterState state) {
      return const LoginScreen();
    },
  ),
  GoRoute(
      path: '/dashboard',
      builder: (BuildContext context, GoRouterState state) {
        return const Dashboard();
      },
      routes: [
        GoRoute(
          path: 'home',
          builder: (BuildContext context, GoRouterState state) {
            return const HomeScreen();
          },
        ),
        GoRoute(
          path: 'home2',
          builder: (BuildContext context, GoRouterState state) {
            return const Home2Screen();
          },
        ),
      ]),
]);

I need to know is it not possible like I fix sidemenu and route on dashboard screen and it will change in view.

Example

class Dashboard extends StatelessWidget {
  const Dashboard({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
         SideMenu(),
         Route() //Home or Home1 
        ],
      ),
    );
  }
}

So here is side menu and route. Some if url route is /dashboard/home or /dashboard/home1 it will change the Route view ? Because if I added a side menu in each file of home or home1 then there will be screen change visible on it which I don’t want.

Tags:

2

Answers


  1. 0

    You can use "Stateful Nested Routes" for your problem. You can actually think of the side menu as a bottom navigation bar. This way you won’t have to add a side menu to all the screens.

    I put a small example for you.

    Scaffold(
  body: /* TODO: decide which page to show, depending on the selected index */,
  bottomNavigationBar: NavigationBar(
    selectedIndex: /* TODO: where does this come from? */,
    destinations: const [
      // the appearance of each tab is defined with a [NavigationDestination] widget
      NavigationDestination(label: 'Section A', icon: Icon(Icons.home)),
      NavigationDestination(label: 'Section B', icon: Icon(Icons.settings)),
    ],
    onDestinationSelected: (index) { /* TODO: move to the tab at index */ },
  ),
)

    And you can access more information about Nested Routes of Go Router from here: https://codewithandrea.com/articles/flutter-bottom-navigation-bar-nested-routes-gorouter/

    But maybe this using does not match your path "/dashboard/home". You must check if your URL structure is important.

    Login or Signup to reply.
  2. 0

    you can try ShellRoute

        ShellRoute(
  builder: (BuildContext context, GoRouterState state, Widget child) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App Shell')
      ),
      body: Center(
        child: child,
      ),
    );
  },
  routes: [
    GoRoute(
      path: 'a'
      builder: (BuildContext context, GoRouterState state) {
        return Text('Child Route "/a"');
      }
    ),
  ],
),

    in this example, appbar with the text App Shell will be constant but when you change it to a route it will render Text('Child Route "/a"') widget inside the ShellRoute body property.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search