This gist defines how to use scaffold in jetpack compose.

scaffold.kt

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun ScaffoldShower() {
    Scaffold(
        topBar = { TopAppBarProvider() },
        floatingActionButton = { FABProvider() },
        bottomBar = { BottomBarProvider() }
    ) { paddingValues ->
        AppBodyProvider(modifier = Modifier.padding(paddingValues))
    }
}


//This function provides a top app bar.
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun TopAppBarProvider() {
    TopAppBar(
        title = { Text(text = "Top Bar") },
        actions = {
            Image(
                imageVector = Icons.Filled.Settings,
                contentDescription = "Settings Icon"
            )
        },
        colors = TopAppBarDefaults.smallTopAppBarColors(Color.Yellow)
    )
}


// This function provide body of the application
@Composable
fun AppBodyProvider(modifier: Modifier) {
    Column(
        modifier = modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "Body Content")
    }
}


//This function provides a floating action button
@Composable
fun FABProvider() {
    FloatingActionButton(onClick = { /*TODO*/ }) {
        Image(
            imageVector = Icons.Filled.Add,
            contentDescription = "FAB Icon"
        )
    }
}

//This function provides a bottom navigation bar
@Composable
fun BottomBarProvider() {
    BottomAppBar() {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceAround
        ) {
            Icon(
                imageVector = Icons.Filled.Home,
                contentDescription = null
            )
            Icon(
                imageVector = Icons.Filled.AccountBox,
                contentDescription = null
            )
        }
    }
}