Getx and GoRouter without Bindings in Flutter Web

Intro

Routing + state management in Flutter and especially Flutter Web often gets messy when combining GoRouter and GetX.

I was in exactly same situation where I was facing bugs while using bindings in Flutter Web. And I could not ditch GoRouter since navigation in Flutter web becomes very difficult without it.

This guide shows a simple, repeatable pattern to use GoRouter + GetX controllers without Bindings and Flutter Web compatible.

In this guide you’ll learn how to:

• Inject controllers directly from GoRouter
• Pass route parameters into controllers safely
• Access controllers inside widgets
• Prevent duplicate controller instances using tags

GoRouter handles navigation and deep linking. GetX is used purely for dependency injection and state management.

Project Dependencies

go_router: ^16.3.0

get: ^4.7.2

The Problem

When you have Getx and GoRouter together then you’re gonna face these issues:

1) Bindings don’t naturally fit GoRouter

GoRouter uses a builder pattern and supports deep links, redirects, and web URLs. Bindings introduce an extra abstraction layer that becomes difficult to control.

2) Route parameters become awkward

You often need route parameters inside controllers, but bindings don’t receive GoRouter parameters cleanly.

3) Deep linking breaks expectations

If a user opens a URL directly (web or refresh), you must guarantee the controller is ready before UI builds.

4) Duplicate controller instances

Opening multiple tabs like:

/brand/1

/brand/2

/brand/1 (another tab)

can lead to:

• Controller conflicts
• Old data being reused
• Get.find() errors

Solution

Since we can’t use the Bindings from Getx, we just have to treat GoRouter builder as your binding.

We inject controllers inside the route builder using route parameters.

Step 1 - Create Controller With Constructor Parameters

Your controller should receive all required data directly via constructor. This makes the controller fully self-contained and easy to test.

class BrandDetailsController extends GetxController {
  final String clientId;
  final String brandId;

  BrandDetailsController({
    required this.clientId,
    required this.brandId,
  });

  // API calls → onInit / onReady
}

Step 2 - Inject Controller Inside GoRouter Builder

Extract parameters from the route and inject the controller using Get.put().

GoRoute(
  name: AppRouteNames.brandDetails,
  path: AppRoutePaths.brandDetails,
  redirect: (context, state) {
    final auth = Get.find<AuthService>();
    if (auth.getToken() == null) {
      return AppRoutePaths.login;
    }
    return null;
  },
  builder: (context, state) {
    final brandId = state.pathParameters['id']!;

    Get.put(
      BrandDetailsController(
        clientId: brandId,
        brandId: brandId,
      ),
      tag: "${brandId}_$brandId",
    );

    return BrandDetailsScreen(
      clientId: brandId,
      brandId: brandId,
      adminView: false,
    );
  },
);

We are injecting inside builder because :

• Works when user enters URL directly
• Route parameters are instantly available
• No need for GetX Bindings
• Controller is ready before UI loads

Step 3 - Access Controller Inside the UI

Use the same tag when calling Get.find() in the UI.

final brandDetailsCtrl = Get.find<BrandDetailsController>(
  tag: "${brandId}_$brandId",
);

Now you get access to the controller instance in the UI like any other Getx project.

Result

This pattern gives you the best of both worlds:

Clean architecture

• GoRouter handles navigation
• GetX handles DI + state
• No extra binding layer

Perfect deep link support

Controllers are created even when users open URLs directly.

Safe multi-tab behavior

Using tags ensures:

• No controller conflicts
• Each page/tab gets its own instance
• No stale data reuse
• No Get.find() errors

You now have a simple, production-ready pattern for using GoRouter with GetX without bindings perfect for Flutter Web and mobile.

That’s all ! Still got some issues? Feel free to contact me.
Thanks for reading.