Recipe

Recipe: Jetpack Compose screen scaffold

A reusable Compose screen template with top bar, content area, and bottom navigation wired through Meridian state.

@Composable
fun MeridianScreen(
    title: String,
    state: ScreenState,
    onEvent: (ScreenEvent) -> Unit,
    content: @Composable () -> Unit
) {
    Scaffold(
        topBar = {
            TopAppBar(
                title = { Text(title) },
                colors = TopAppBarDefaults.topAppBarColors(
                    containerColor = Color(0xFF0A0612),
                    titleContentColor = Color(0xFF8B5CF6)
                )
            )
        },
        bottomBar = {
            MeridianBottomNav(state, onEvent)
        }
    ) { padding ->
        Box(modifier = Modifier.padding(padding)) {
            content()
        }
    }
}

State

ScreenState holds loading, data, and error sealed classes. Meridian dispatches updates through a unidirectional flow.

Events

ScreenEvent sealed interface carries user actions back to the ViewModel. No side effects inside composables.

← Back to Docs All Recipes