I have an app with three distinct graphs, each wit...

# compose

[Matti MK]

I have an app with three distinct graphs, each with separate needs for a Scaffold.
• Graph1 has no scaffold
• Graph2 has typical bottom scaffold
• Graph3 has top and bottom scaffolds, but only with Graph3 routes
I am wondering how to build this. Should I have multiple Scaffold and NavHost or instead use just one NavHost and one Scaffold, switching out the Scaffold content based on current Graph? Thank you 🙂

[kotlinforandroid]

Are your graphs nested? I.e., do you have a graph that acts as the root? IIRC using different Scaffold s will result in flickering if you change the nav destination to one that also contains a Scaffold . If you want the best experience, you probably want to have a single NavHost that contains all graphs. And change the content of the scaffold dynamically.

[Matti MK]

Nope, not one root graph.

An example for the flow could be as follows:
• Graph1 - login / onboarding without scaffold
• Graph2 - Main logged in content, scaffold
--> Graph3 - navigated to from Graph2, separate scaffold

[Matti MK]

Currently I’m handing Graph1 / Graph2 scaffold visibility by checking `navController`’s destination. Both graphs are nested inside same NavHost and Scaffold. This works decently but not especially smoothly.

Now I’m adding Graph3, which raised the question whether I should do a refactor, but I’m not finding any reasonable resources to make an educated guess

[Colton Idle]

the principles of naviagtion don't advise working this way. they want you to set a single start navigation of your home screen/dashboard/feed screen, etc. and have a single nav host and you do the check there for loggedin/out. this question is asked fiarly frequently (if you scroll up you will see one from like last week).

see here for a nice intro:

https://youtu.be/09qjn706ITA?t=287▾

[Matti MK]

Maybe I should’ve been more specific. MainActivity sets MyApp as content and there:

MyApp() {
          val start = if (isLoggedIn) {
            Graph.LoggedIn
        } else {
            Graph.Login
        }
      
     Scaffold( ... ) {
          NavHost(startDestination = start.route) {
                graph1()
                graph2()
           }
      }
}

However, looking at that I believe it does follow the above guide

[Matti MK]

But as I have the following but now I also need to add: graph3 that has completely separate Scaffold requriements, I wonder if I should contain the logic to swap Scaffold contents there in MyApp or refactor to another solution.

[Matti MK]

I’ve now been testing a bit further with conditional scaffold UI and it seems to be working well 👍 Not really optimal, but I think I’ll investigate this approach further for now

[Matti MK]

I finished migrating now to having all graphs flat, as in my root NavHost and Scaffold containing Graph1-3, with conditional Scaffold content.

This seems to work very well