https://kotlinlang.org logo
#compose
Title
# compose
m

Matti MK

06/21/2022, 11:49 AM
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 🙂
k

kotlinforandroid

06/21/2022, 11:58 AM
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.
👍 1
m

Matti MK

06/21/2022, 12:11 PM
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
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
c

Colton Idle

06/21/2022, 12:18 PM
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

👍 1
m

Matti MK

06/21/2022, 12:21 PM
Maybe I should’ve been more specific.
MainActivity
sets
MyApp
as content and there:
Copy code
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
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.
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
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
👌 1
4 Views