Scaffold - devrath/ComposeAlchemy GitHub Wiki

About the component

• It is a material-3 component from the compose library of the material-3 design.
• It provides a way to organize the below components in certain material-specific guidelines.
  • Top App bar
  • Drawer
  • Floating Action Bar
  • Bottom Navigation
  • Content Area
  • Snack Bar
• They provide slots for ready-made components

Visualization

Code

@OptIn(ExperimentalLayoutApi::class, ExperimentalMaterial3Api::class)
@Composable
fun ScaffoldDemoScreen(modifier: Modifier = Modifier) {

    val snackBarState = remember { SnackbarHostState() }
    val snackBarScope = rememberCoroutineScope()

    Scaffold(
        topBar = {
            TopAppBar(
                title = {
                    Text("Title")
                },
                navigationIcon = {
                    Icon(
                        imageVector = Icons.AutoMirrored.Default.ArrowBack,
                        contentDescription = "Back"
                    )
                }
            )
        },
        floatingActionButton = {
            FloatingActionButton(onClick = {
                snackBarScope.launch {
                    snackBarState.showSnackbar(message = "Hello World")
                }
            }) {
                Icon(imageVector = Icons.Default.Add, contentDescription = "Place")
            }
        },
        snackbarHost = {
            SnackbarHost(
                hostState = snackBarState
            )
        },
        bottomBar = {
            BottomAppBar {
                NavigationBarItem(
                    selected = false,
                    onClick = {},
                    icon = {
                        Icon(
                            imageVector = Icons.Default.Home,
                            contentDescription = "Home"
                        )
                    },
                    label = {
                        Text(text = "Home")
                    }
                )
                NavigationBarItem(
                    selected = false,
                    onClick = {},
                    icon = {
                        Icon(
                            imageVector = Icons.Default.Person,
                            contentDescription = "Profile"
                        )
                    },
                    label = {
                        Text(text = "Profile")
                    }
                )
            }
        },
        floatingActionButtonPosition = FabPosition.Center
    ) { padding ->

        Box(
            modifier = Modifier
                .fillMaxSize()
                .background(color = Color.Gray)
                .padding(padding),
            contentAlignment = Alignment.Center
        ){
            Text("Content")
        }

    }

}

Output