Root route and different initialRoute creates strange WidgetTree - flutter

I'm trying to navigate between different screens using named routes.
I'm defining a root-Route (you may call it fallback route(?)), some other routes and an initialRoute, linking to a different screen than the root-Route.
The widget tree seems to load the root-route as well. But why?
TicketsScreen has many Widgets and I don't want them to be loaded beforehand.
BTW: This is only an example. When having multiple routes, it still loads both of the mentioned.

That's because /tasks has a leading /.
The navigation system pushes everything that's there, let me explain.
If you had there routes:
/
/tasks
/tasks/new
navigating to /tasks/new will push all of three.
If you want to keep "single" routes, you should use top level qualifiers. In your case that would be removing the / from /tasks.
This mechanism is useful to push a path and avoid strange pops if, for example,
you navigate to /tasks/new from a shortcut (not from /tasks) and then pop back. Would it be good to pop to the starting point? Would it be better if popping from a new task will lead to the tasks page?
That's a brief explanation of what the navigator tries to do, I guess.

Related

How to see GoRouter navigation stack's top element without poping it?

I am building a flutter app. I have a place in the app where you can make infinite loops with
GoRouter.of(context).push(...);
I mean you can navigate to Screen A and then to B and then to A. There are many screens and many possible loops but I want to protect the user from the most obvious one, the A>B>A>B type.
(I don't care about greater loops like A>B>C>A>B>C and alikes)
To do that, I want to check the navigation stack top element and if the element is the same where we would go with a push, I would do a pop.
Problem is that I can't find anything on Google...
Tried:
Googling it, checking API docs, reading IntelliSense
EDIT:
There is a big set of screens and can't know the previous location solely based on the current one.
Use GoRouter.of(context).location
GoRouter.of(context).location gives you the current location
Example:
Route A has route path /routeA
Route B has route path /routeB
GoRouter.of(context).location will return either /routeA or /routeB
Based on which you can make decision to pop() or push() page

Flutter Navigator 2.0. Nested router with separate state

I'm trying to create an app that has this structure:
I have several questions.
In what router delegate I should use RouteInformationParser? May be in both router delegates? I'd like to keep the authentication router and the nested router as separate as possible.
The same question applies to setNewRoutePath. In what router delegate I should implement it? Again in both?
In general may be this separate states idea is wrong. Should I abandon it and merge AuthPathState and NestedPathState? Please let me know.
You would usually have separate RouterDelegate if you want to include additional Navigator widgets to allow "nested" navigation (for example preserving a BottomNavigationBar which is part of the widget currently shown by the root Navigator while navigating with the nested Navigator).
Therefore for the use case stated here, I would merge those to something like AppPathState.

Pass RouteSettings between nested navigators

I'm trying to set a notification feature on my Flutter app.
My app is made of a top root Navigator, which handles login page or other simple pages, and contains 4 (or 5, given the user rights) tabs, each one having its own Navigator to handle nested routes (e.g. offers, offers/{id}, categories, categories/{id}).
My problem is : how do I pass the top root navigator RouteSettings.arguments to the nested Navigator ?
Concrete exemple : I send a notification promoting a specific offer with a custom message to display on the page, so in the Firebase instance, I will get parameters before pushing the requested route making
Navigator.of(context).pushNamed('offers/specificOffer', OfferPageArguments(1, "hi this is my message"));
The root Navigator will handle this perfectly, but then, will delegate the correct route and arguments to the nested navigator.. So how do you provide those data ?
I thought of replacing the nested Navigator (RouteSettings settings) => onGenerateRoute(settings)
with
(RouteSettings settings) => onGenerateRoute(rootNavigatorSettings)
But this will only work with the first generated route. Then, making NestedNavigator.of(context).pushNamed('/specificOffers', OfferPageArgs(2, "new message")) will not provide the given arguments.
Did someone already faced the same problem or could give me a different way to achieve this ?
Thanks

flutter- getx nested routes with tab

I am going to build flutter app with Getx.
I followed nested navigator from
https://github.com/jonataslaw/getx/issues/799#issuecomment-730719165
at this example, only shows 1 step sub routes like "/browse".
I need to make another sub routes like "/browse/tabX" and "/browse/tabY"
when click browse button from BottomNavigationBar, It shows tabs (tabX and tabY) on the top. and tabX is default selected.
for the body, it shows automatically their pages.
Also using Get.Named('/browse/tabY') can access to open their page(select second tab and show their body).
Can you help me?
Oh Now I got the answer!
What I make a mistake is I did not use "sub-name".
for example, at initialRoute,
I used '/home/browser' but it should be '/browser' if it is sub-route.
Because the concept is route to subrouter's root and handle by subrouter.
so "initialRoute from root" route to /home first.
and "initialRoute from subroute" route to /browser again!
I use classed variable instead just string so I did not figure this difference out.

Ionic UI Router issue: 2nd level state views not loading

I can't wrap my head around this issue I've been experiencing, or perhaps I'm missing some crucial point here. I jotted down this sample app on ionic playground, it is of course a simplified version of my app.
Basically I have a tabbed layout with two views which share a common datasource of items (in my app it's a sqlite db table); the first view displays items in a certain state whereas the other tab display the remaining items (in my example I've used the TODO list metaphor).
Each tab has a child state which I refer to as 2nd-level state (assuming level 0 is the abstract tab state. These two 2nd-level states are defined separately but share a common controller and template.
I cannot for the life of me understand why these two states aren't being navigated to when I click on a list item from either of the two lists (1st-level state views).
NOTE: In the ionic playground no error is thrown in the console, but I can't quite tell what is going on in terms of state URLs. But when I test my actual app (where the problem is the same) in a browser I can see the URL changing to #/tab/tasks/xxxx or #/tab/completed/xxxx but template is not loading. Upon googling I came across several SO questions:
Ui-router URL changes, nested view not loading
In Angular ui-router nested state url changes,but template is not loading
UI-Router: URL changes, but view is not loaded
Angular Router - Url changes but view does not load
URL changes but view does not hcange
Angular UI-Router : URL changed but view isn't loaded
but the answers provided therein haven't worked for me (tried, as per the last one I listed, to add the # sign after the view name in the child states, but to no avail).
Kinda stuck, would really appreciate some input! Cheers.
Managed to get it working following this answer; I had previously tried simply appending the # character after the view name in nested states but it turns out the trick was to append #tab, where tab is the name of the top-level abstract state. I updated my fiddle on ionic playground. Cheers to you all.