Scaffold

Scaffold

A basic layout structure that provides a foundation for organizing content and common UI elements.


Installation

./gradlew lumo --add Scaffold

Usage

Basic Scaffold

Scaffold(
    topBar = {
        TopAppBar(
            title = { Text("App Title") }
        )
    },
    content = { padding ->
        Box(modifier = Modifier.padding(padding)) {
            Text("Content")
        }
    }
)

Scaffold with Navigation, Snackbar and FAB

var showSnackbar by remember { mutableStateOf(false) }
val snackbarHostState = remember { SnackbarHostState() }
 
Scaffold(
    topBar = {
        TopAppBar(title = { Text("App Title") })
    },
    bottomBar = {
        NavigationBar {
            // Navigation items
        }
    },
    snackbarHost = {
        SnackbarHost(snackbarHostState)
    },
    floatingActionButton = {
        FloatingActionButton(
            onClick = { /* Handle click */ }
        ) {
            Icon(Icons.Default.Add, "Add")
        }
    },
    content = { padding ->
        Box(modifier = Modifier.padding(padding)) {
            Text("Content with bottom bar")
        }
    }
)
 

API Documentation

Parameters

ParameterTypeDescription
modifierModifierModifier for the scaffold
topBar@Composable () -> UnitTop app bar content
bottomBar@Composable () -> UnitBottom bar content
snackbarHost@Composable () -> UnitSnackbar host content
floatingActionButton@Composable () -> UnitFloating action button content
floatingActionButtonPositionFabPositionPosition of the FAB
containerColorColorBackground color of the scaffold
contentColorColorContent color of the scaffold
contentWindowInsetsWindowInsetsWindow insets for the content
content@Composable (PaddingValues) -> UnitMain content of the scaffold