This is something that always made struggle also with XML design. I tried with something like ```Sca...

# compose

[Davide Giuseppe Farella]

This is something that always made struggle also with XML design.
I tried with something like

Scaffold(topBar = ..., bottomBar = ..., ...) {
  when (currentScreen) {
    ...
  }
}

Problem is that some screen have fab, some have search bar in topBar, which has actions, etc.
So I change that as

val content @Composable () -> Unit = {
  when (currentScreen) {
    ...
  }
}

if (currentScreen.isHomeDestination) {
  Scaffold(...) { content() }
else 
  content()

and it was still looking nice on the UI prospective, but ugly on the code, because some screens will be wrapped in Scaffold, while some will be wrapped somewhere else ( 👆 ),

So I created a custom Scaffold and moved into my screens

@Composable
fun SearchMovie(...) {
  HomeScaffold {
    ...
  }
}

But now it looks ugly on the UI, because I open my drawer, but when I select an item it replaces the whole screen, so my drawer disappear without the animation.

What would be the best way to deal with that?

[Davide Giuseppe Farella]

Woops, that was stupid 🙂

drawerState.close(myAction)

[Eric Martori]

what a about a property in currentScreen that tells you if the screen has a top bar?

Scaffold(
    topBar = { AppBar(currentScreen) }.takeIf(currentScreen.hasTopBar)
) { /*body*/ }

[Davide Giuseppe Farella]

Problem is that some screen have fab, some have search bar in topBar, which has actions, etc.

[Eric Martori]

Scaffold accepts nullable lambdas for this parameters, you can decide wether they compose or not cheking the currentScreen.
You could (for example) have the following Screen interface:

interface Screen {
    val topBar: @Composable (() -> Unit)?
    val bottomBar: @Composable (() -> Unit)?
    val fab: @Composable (() -> Unit)?
    val body: @Composable (InnerPadding) -> Unit
}

and implement your scaffold like this:

Scaffold(
    topBar = currentScreen.topBar,
    bottomBar = currentScreen.bottomBar,
    floatingActionButton = currentScreen.fab
) {
    currentScreen.body(it)
}

Take in mind this are just some ideas I am not experienced with Compose yet

[Davide Giuseppe Farella]

What about the click action for the fab? 😅

[Davide Giuseppe Farella]

Or even worse, the query for the search bar

[Timo Drick]

You could also just draw the scaffold inside of your screen. Maybe when it is so complexe and completly different on every screen that makes more sense.