Reputation: 177
if we use MaterialApp
, we build like this:
Navigator(
key: naviKey,
onGenerateRoute: (routeSettings) => MaterialPageRoute(
builder: (context)=>Container(),
),
)
and now, how to build if we use Getx
?
Upvotes: 2
Views: 1925
Reputation: 128
From GetX documentation in github, I found this:
Navigator(
key: Get.nestedKey(1), // create a key by index
initialRoute: '/',
onGenerateRoute: (settings) {
if (settings.name == '/') {
return GetPageRoute(
page: () => Scaffold(
appBar: AppBar(
title: Text("Main"),
),
body: Center(
child: TextButton(
color: Colors.blue,
onPressed: () {
Get.toNamed('/second', id:1); // navigate by your nested route by index
},
child: Text("Go to second"),
),
),
),
);
} else if (settings.name == '/second') {
return GetPageRoute(
page: () => Center(
child: Scaffold(
appBar: AppBar(
title: Text("Main"),
),
body: Center(
child: Text("second")
),
),
),
);
}
}
),
I think it is useful for your question
Upvotes: 0
Reputation: 5575
Routing in GetX can be setup like so. Note Page1.id
is after putting static const id = 'page_1
in Page1
so you don't have to use raw strings.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
home: Page1(),
routes: {
Page1.id: (context) => Page1(),
Page2.id: (context) => Page2(),
},
);
}
}
or like this
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
home: Page1(),
getPages: [
GetPage(name: Page1.id, page: () => Page1()),
GetPage(name: Page1.id, page: () => Page1()),
],
);
}
}
You can setup the list of routes on another page if you don't want to clutter up your GetMaterialApp
with all your routes.
Then when you want to navigate you can do it like this
Get.to(Page2());
Upvotes: 1