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

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

score 2 · Answer 1 · answered Jul 14 '21 at 20:15

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

you create the AppRouter class when initializing and setting up the auto route package. — Alain. Jr, Apr 10 '23 at 17:21

score 0 · Accepted Answer · answered Jun 13 '21 at 14:28

0

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.

answered Jun 13 '21 at 14:28

Yura

1,937
2
19
47

Prior to upgrading to null safety and the latest versions of AutoRoute and Get, everything was working accordingly. I was using AutoRoute for generating boilerplate navigation code and Get for contextless navigation. Back then setting the navigation up was straightforward. The latest changes led to breaking my code. For now, I will just be using Get. – Biosx Jun 13 '21 at 23:05
When I try and navigate to a `child` page it is just returning the parent page, any ideas why? – Luca Jeevanjee Feb 14 '22 at 13:02
Hello Yura! can you please share the complete example of navigation 2.0 using getx package or GitHub project? It would be very helpful. Thanks in advance. – Mehroze Zaidi Sep 13 '22 at 12:05
Hello Mehroze! Sorry for the delay.. I haven't tried using navigation 2.0... And I think GetX is not ready yet to adopt it knowing that there is still so many open issues in that context. But [they do have sample for us to try](https://github.com/jonataslaw/getx/tree/master/example_nav2) – Yura Sep 20 '22 at 13:52

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

2 Answers2