Coordinator example.

[oscarshaitan]

My case is quite particular.
On the web, I'm currently using auto_router.
The main reason is that we have a double-nested navigation, organized with a tab view. The challenge is that my tabs have some fixed tabs, but others are dynamic (you can imagine browser tabs where you can open and close some tabs).
In your examples, the tab example lives under Declarative.
So I have a few questions.

1. Can the different paradigms be mixed?
2. Can you help me with a short example of a tab system with the Coordinator?
3. What are the restrictions that prevent Declarative from being supported on the web?

And last, good job! It looks simple and is heading in a good direction. Looking forward to using it in a test (I have many other bugs/limitations, but the tab is the main one that forces us to stay with auto_router).

[definev]

Hi @oscarshaitan, thank you for considering switching to ZenRouter 👍

1. Yes, you can mix and match imperative and declarative routing together. However, you need to build your own way to sync with the URL bar on the web. That’s why the Coordinator is the standard approach if you want an out-of-the-box web-compatible solution: nested layouts, deep linking, query param mutations, etc.

2. Double-nested navigation is a classic scenario in routing, and Coordinator is the de-facto choice for handling it in ZenRouter.
   You can check the minimal example in this gist. https://gist.github.com/definev/c447b5c720257cd14ac739976db0a875
   The key idea is that each RouteLayout has a 1:1 relationship with a StackPath (NavigationPath for Navigator, IndexedStackPath for IndexedStack).
   You can customize it by overriding the build method and calling buildPath to render inner content inside the StackPath.

3. I don’t fully understand this question. The declarative approach already runs on the web.
   If you meant why declarative routing doesn’t currently work in the Coordinator pattern, I agree it would be a great feature. I’ll figure out a smooth way to integrate it 👍

[definev]

Oh i read you comment again and realise the dynamic tab :-)
I'm working on it. It will do exactly like chrome tabs. But for now you can custom the buildPath function to display NavigationPath for dynamic stack and make sure to call completeOnResult and onDidPop if you create custom way to handle the path.

[oscarshaitan]

with buildPath the problem is that will push a new view not open a new tab.
this is what Im doign currently:

Recording.2025-12-29.122450.mp4

aout_route do not support all that, I build a layert over autoroute to support the dynamic tabs and be able to use the url to save wich tab wwas selected and wich dynamic tabs I got open at that point.
also the tabs starts with Loading... but when I finsih the fetch of the content can change the tab name to somethign related to the content

[oscarshaitan]

And about the question 3 is because you have this in the read me

[definev]

https://github.com/definev/dynamic_tab_zenrouter @oscarshaitan

I created an example for you on how to create a custom StackPath that behaves like Chrome tabs, as you described. You need to use the latest zenrouter version because, starting from 0.4.11, I've exposed some internal APIs to make it easier for users to create their own paths. 👍

Dynamic.tab.zenrouter.mp4

[definev]

Another way to manage dynamic tabs is to use RouteQueryParameter, where you can directly manipulate URLs, and the widgets inside will automatically decide how to open and activate dynamic tabs base your own intent. It also provides built-in back and forward buttons for web users.

The source code is available in the above repo 👍

Better.Dynamic.mp4

[oscarshaitan]

Fantastic Ill check it and let you know any o side I have

[definev]

https://github.com/definev/dynamic_tab_zenrouter/blob/main/lib/main_chrome_tabs.dart @oscarshaitan
You can check out the chrome tabs example for more detailed concrete example how to build a chrome tabs-like UI that work seamlessly with Navigation 2.0 :-)