androidandroid-jetpack-composeandroid-bottomappbarandroid-jetpack-compose-scaffold

What is Scaffold? Jetpack compose


I want to know what is Scaffold in jetpack compose with a BottomAppBar example can anyone help me Scaffold


Solution

  • Scaffold allows you to implement a UI with the basic Material Design layout structure. Scaffold provides slots for the most common top-level Material components, such as TopAppBar, BottomAppBar, FloatingActionButton, and Drawer.

    Something like:

       val scaffoldState = rememberScaffoldState()
       // Create a coroutineScope for the animation
       val coroutineScope = rememberCoroutineScope()
    
    
        Scaffold(
            scaffoldState = scaffoldState,
            drawerContent = { Text("Drawer content") },
            bottomBar = {
                BottomAppBar(cutoutShape = CircleShape) {
                    IconButton(
                        onClick = {
                            coroutineScope.launch { scaffoldState.drawerState.open() }
                        }
                    ) {
                        Icon(Icons.Filled.Menu, contentDescription = "....")
                    }
                }
            },
            floatingActionButton = {
                ExtendedFloatingActionButton(
                    text = { Text("Action") },
                    onClick = { /* .... */ }
                )
            },
            floatingActionButtonPosition = FabPosition.Center,
            isFloatingActionButtonDocked = true,
            content = { innerPadding ->
                //....
            }
        )
    

    enter image description here