How do I set up navigator using Getx and Auto Route? - flutter

Question

Problem:
I am having trouble setting up navigation using GetX and AutoRoute.
Code Setup:
According to the GetX documentation, if you want to use GetX navigation you have to replace MaterialApp() with GetMaterialApp(). You also set the routes.
void main() {
runApp(
GetMaterialApp(
initialRoute: '/',
getPages: [
GetPage(name: '/', page: () => MyHomePage()),
GetPage(name: '/second', page: () => Second()),
GetPage(
name: '/third',
page: () => Third(),
transition: Transition.zoom
),
],
)
);
}
The AutoRoute example uses MaterialApp.router() to set up the routerDelegate and routeInformationParser.
final _appRouter = AppRouter()
...
Widget build(BuildContext context){
return MaterialApp.router(
routerDelegate: _appRouter.delegate(...initialConfig),
routeInformationParser: _appRouter.defaultRouteParser(),
),
}
Here is how I set up the navigation according to Getx and AutoRoute:
void main() {
configureDependencies();
runApp(Portfolio());
}
class Portfolio extends StatelessWidget {
final _appRouter = AppRouter.Router();
#override
Widget build(BuildContext context) {
return GetMaterialApp.router(
routerDelegate: _appRouter.delegate(),
routeInformationParser: _appRouter.defaultRouteParser(),
builder: (context, extendedNav) => Theme(
data: ComplexReduxTheme.complexReduxLightTheme,
child: extendedNav ?? Container(color: Colors.red),
),
);
}
}
I am using GetMaterialApp.router which returns a GetMaterialApp. Despite this, I get the error "You are trying to use contextless navigation without a GetMaterialApp or Get.key.". I have tried setting up the navigator key and setting Get.testMode = true but nothing happens(no error) when I try to navigate to another screen.
Desired Result:
I should be able to navigate to the desired screen via Get.toNamed().
Current Result:
I get the following error from GetX when trying to navigate to another screen using Get.toNamed() : "You are trying to use contextless navigation without
a GetMaterialApp or Get.key.
If you are testing your app, you can use:
[Get.testMode = true], or if you are running your app on
a physical device or emulator, you must exchange your [MaterialApp]
for a [GetMaterialApp]."
AutoRoute Version: 2.2.0
Get Version: 4.1.4

Answer 1

You don't need external routing plugin, GetX already did that for you, and if you want to navigate, just use Get.toNamed("/some-page") and it will show you the page you wanted. Same goes to nested route.
For Example
GetPage(
name: '/third',
page: () => Third(),
transition: Transition.zoom,
children: [
GetPage(
name: '/child-of-third',
page: () => ChildOfThird(),
),
],
),
// You access it like this
Get.toNamed("/third");
// And this one, for the nested page
Get.toNamed("/third/child-of-third");
The reason you got the error is when you use external routing plugin in GetX, it will generate their own code, with their own context in their own ecosystem. GetX doesn't know which context does the plugin use since it was outside of its lifecycle.

Answer 2

I was facing the same issue when combining both getx and auto router in my case i needed nested navigation as well I created a work around like this
I created initial bindings and passed appRouter to it and saved it in getx routing controller that i was using to a method like Get.toNamed because with initial appRouter you don't need context you can navigate like this
// main app widget
class _myAppState extends State<MyApp> {
final _appRouter = AppRouter();
#override
Widget build(BuildContext context) {
return GetMaterialApp.router(
routerDelegate: _appRouter.delegate(),
routeInformationParser: _appRouter.defaultRouteParser(),
initialBinding: InitialBinding(router: _appRouter,),
);
}
}
// initial binding to store to store app router
class InitialBinding extends Bindings {
AppRouter router;
InitialBinding({required this.router,});
#override
void dependencies() {
Get.put(NavRoutesController(router: router,),permanent: true);
}
}
// router controller
class NavRoutesController extends GetxController {
AppRouter router;
NavRoutesController({required this.router,});
void toNamed(String route){
router.pushNamed(route);
}
}
//to navigate use
final router = Get.find<RouterController>();
router.toNamed("/some")
//or
Get.find<RouterController>().toNamed("/some")
// you can get base context as well from AppRouter like this
Get.find<RouterController>().router.navigatorKey.currentState.context