英文:
Flutter web nested routing
问题
I am trying to set up Flutter web with a drawer on the left side containing 2 menus, and its respective pages on the right side. The drawer should always be open on the left side. When I click each button, only the right side should update. I achieved this with conditional checks, but it's not the right way because if I copy the URL and paste it elsewhere, it reloads. So, I want to set up proper routing. I tried using the go_router, but it opens a new page. Can someone suggest a way to achieve this?
class DashBoard extends StatelessWidget {
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; essentially, I want only the right-side widget to update, while the left side remains fixed.
英文:
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,
答案1
得分: 1
你可以通过将基础页面设置为堆栈来实现这一点：
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(),
],
),
);
}
}
然后在GoRouter中，你可以将它用作ShellRoute：
GoRouter(
routes: [
ShellRoute(
builder: (context, state, child) => PageWrapper(child),
routes: [
// 在这里添加你的路由
],
),
],
);
这将在PageWrapper类中构建ShellRoute的所有子路由。
英文:
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
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论