Flutter web nested routing

Question

hey i am trying to setup in flutter web , with a drawer on the left side with 2 menus and on the right side its respective pages, the drawer. is always open on left side ,when I click on each of button ,only right side should build, I achieved this by doing conditional check but its not right way as if I copy the URL and paste somewhere its reloaded, so I want to setup proper routing, I tried with go router, but all I get is new page, somebody suggest me a way to execute

  const DashBoard({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: const [
          Expanded(flex: 1, child: EnquiryDrawer()),
          Expanded(flex: 6, child: EnquiryListScreen())
        ],
      ),
    );
  }
}

I have shared the image,basically what I want is only right side widget should build,left side should be fixed,

Answer 1

You can achieve this by making your base page a stack:

class PageWrapper extends StatelessWidget {
  const PageWrapper(this.child, {Key? key}) : super(key: key);
  
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(
          children: [
            child,
            //const MenuDrawer(),
          ],
        ),
    );
  }
}

then in goRouter you can use this as ShellRoute:

 GoRouter(
   routes: [
    ShellRoute(
        builder: (context, state, child) => PageWrapper(child),
        routes:[
         //your routes here
        ]
    ],
);

This will build all child routes of the shellroute within the PageWrapper class