How to pass a Composable to another Composable as its parameter and display/run it in Jetpack Compose

Question

I have this drawer I learned to make on youtube

https://www.youtube.com/watch?v=JLICaBEiJS0&list=PLQkwcJG4YTCSpJ2NLhDTHhi6XBNfk9WiC&index=31 Philipp Lackner

I want to add the drawer to my app which has multiple screens and some of them don't need the drawer so I implemented navigation with screens , and some of the screens need to also have the drawer ontop of them wrap them.

this is the code of the drawer


val scaffoldState = rememberScaffoldState()
                val scope = rememberCoroutineScope()
                Scaffold(
                    drawerGesturesEnabled = scaffoldState.drawerState.isOpen,
                    scaffoldState = scaffoldState, topBar = {
                    AppBar(onNavigationIconClick = {
                        scope.launch {
                            scaffoldState.drawerState.open()
                        }

                    })
                }, drawerContent = {
                    DrawerHeader()
                    DrawerBody(items = listOf(
                        MenuItem(
                            id = "home",
                            title = "Home",
                            contentDescription = "Go to home screen",
                            icon = Icons.Default.Home
                        ),
                        MenuItem(
                            id = "settings",
                            title = "Settings",
                            contentDescription = "Go to Settings screen",
                            icon = Icons.Default.Settings
                        ),
                        MenuItem(
                            id = "help",
                            title = "Help",
                            contentDescription = "Go to help screen",
                            icon = Icons.Default.Info
                        ),
                    ), onItemClick = {
                        println("Clicked on ${it.title}")

                        when (it.id) {
                            "home" -> {
                                println("Clicked on ${it.title}")
                            }
                            "settings" -> {
                                println("Clicked on ${it.title}")
                            }
                            "help" -> {
                                println("Clicked on ${it.title}")
                            }
                        }
                    })

                }) {

                    Text(text = "Hello World")

                }

the Text = Hellow world is where I want to pass my parameter of the screen which I don't know how to do it. I want to add a parameter that takes a composable function and runs it inside

and I followed this navigation video on how to navigate in kotlin

https://www.youtube.com/watch?v=4gUeyNkGE3g&list=PLQkwcJG4YTCSpJ2NLhDTHhi6XBNfk9WiC&index=18

which has 3 big files so if you ask I post them here but I will try to be more specific about what is needed

composable(route = Screen.RegisterScreen.route) {
            RegisterScreen(navController = navCotroller)
        }

and if I put the code in the drawer it works well but I want to split the code to be cleaner because I use the drawer in more places

the code work like the example bellow

composable(route = Screen.PreferenceScreen.route) {
            val scaffoldState = rememberScaffoldState()
            val scope = rememberCoroutineScope()
            Scaffold(

                drawerGesturesEnabled = scaffoldState.drawerState.isOpen,
                scaffoldState = scaffoldState,
                topBar = {
                    AppBar(onNavigationIconClick = {
                        scope.launch {
                            scaffoldState.drawerState.open()
                        }

                    })
                },
                drawerContent = {
                    DrawerHeader()
                    DrawerBody(items = listOf(
                        MenuItem(
                            id = "swipe",
                            title = "Swipe",
                            contentDescription = "Go to Swipe screen",
                            icon = Icons.Default.Home
                        ),
                        MenuItem(
                            id = "settings",
                            title = "Settings",
                            contentDescription = "Go to Settings screen",
                            icon = Icons.Default.Settings
                        ),
                        MenuItem(
                            id = "profile",
                            title = "Profile",
                            contentDescription = "Go to profile screen",
                            icon = Icons.Default.Info
                        ),
                    ), onItemClick = {
                        when (it.id) {
                            "swipe" -> {
                                navCotroller.navigate(Screen.SwipeScreen.route)
                            }
                            "settings" -> {
                                navCotroller.navigate(Screen.PreferenceScreen.route)
                            }
                            "profile" -> {
                                navCotroller.navigate(Screen.CelebProfileScreen.route)
                            }
                        }
                    })

                }) {

         ----->        PreferenceScreen(navController = navCotroller)

            }

        }

but it is not clean code!! how can I use a function pointer to make this work ??

Hi, I added another answer if in-case you need to pass something with Alignment into a Layout like `Column`. Thank you for accepting the answer — z.g.y, Dec 03 '22 at 11:09

score 5 · Answer 1 · answered Dec 03 '22 at 10:42

I can't compile your code and I'm not sure if this will solve your issue, but based on this

… I want to add a parameter that takes a composable function and runs it inside

You can use this as a reference. Consider this composable that takes any composable and runs it inside

@Composable
fun AnyComposable(
    anyComposable: @Composable () -> Unit
) {
    anyComposable()
}

And another composable that uses the composable above and passes any other composable to it like this

@Composable
fun MyScreen() {

    // big red Box composable
    val composable1 = @Composable {
        Box (
            modifier = Modifier
                .size(200.dp)
                .background(Color.Red)
        )
    }

    // small blue Box composable
    val composable2 = @Composable {
        Box(
            modifier = Modifier
                .size(80.dp)
                .background(Color.Blue)
        )
    }

    // small green rectangular Box composable
    val composable3 = @Composable {
        Box(
            modifier = Modifier
                .size(width = 100.dp, height = 30.dp)
                .background(Color.Green)
        )
    }

    var dynamicComposable by remember { mutableStateOf<@Composable () -> Unit> (@Composable { composable1() }) }

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Button(onClick = {
                dynamicComposable = composable1
            }) {
                Text("Comp 1")
            }

            Button(onClick = {
                dynamicComposable = composable2
            }) {
                Text("Comp 2")
            }

            Button(onClick = {
                dynamicComposable = composable3
            }) {
                Text("Comp 3")
            }
        }

        AnyComposable {
            dynamicComposable()
        }
    }
}

and the output:

Hey I ended up doing something different that was more simple to me to understand I will post my answer andark my answer as more favoriteable way to solution the problem for others that will come to this question — Dolev Dublon, Dec 23 '22 at 21:41

score 2 · Answer 2 · edited Feb 06 '23 at 14:10

Or if in case the receiving composable has, lets say a Column, and you want to set-up the argument composables with Alignment beforehand, you can consider this one.

Same composable receiver that accepts any composables but the expected layout is Column.

@Composable
fun AnyComposable(
    anyComposable: @Composable () -> Unit
) {
    Column(
        modifier = Modifier.fillMaxSize()
    ) {
        anyComposable()
    }
}

@Composable
fun MyScreen() {

    // big red box at Start of Column
    val composable1 : @Composable ColumnScope.() -> Unit = @Composable {
        Box (
            modifier = Modifier
                .align(Alignment.Start)
                .size(200.dp)
                .background(Color.Red)
        )
    }

    // small blue box at Center of Column
    val composable2 : @Composable ColumnScope.() -> Unit = @Composable {
        Box(
            modifier = Modifier
                .align(Alignment.CenterHorizontally)
                .size(80.dp)
                .background(Color.Blue)
        )
    }

    // small green rectangle at end of column
    val composable3 : @Composable ColumnScope.() -> Unit = @Composable {
        Box(
            modifier = Modifier
                .align(Alignment.End)
                .size(width = 100.dp, height = 30.dp)
                .background(Color.Green)
        )
    }

    var dynamicComposable by remember { mutableStateOf<@Composable ColumnScope.() -> Unit> (@Composable { composable1() }) }

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {

        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Button(onClick = {
                dynamicComposable = composable1
            }) {
                Text("Comp 1")
            }

            Button(onClick = {
                dynamicComposable = composable2
            }) {
                Text("Comp 2")
            }

            Button(onClick = {
                dynamicComposable = composable3
            }) {
                Text("Comp 3")
            }
        }

        AnyComposable {
            dynamicComposable()
        }
    }
}

Output:

thank you a lot! for taking the time to explain all this code! — Dolev Dublon, Dec 03 '22 at 12:03
hi i have a question about the gif you uploaded I want to upload a gif as well but it is above the maximum size of 2mb how did you recorded the video and made the gif less than 2mb — Dolev Dublon, Dec 03 '22 at 15:35
Ohh, Im using [ezgif](https://ezgif.com), use the first tab `GIF Maker` -> `Choose File and Upload`, the page will re-load and show you a video of the preview, look for the option named "`Size`" (its a dropdown), choose "`320-Auto`" (I think thats the smallest one), then press `Convert to GIF` and somewhere at the options at the bottom right there is a `Diskette` button to download the file. Btw I'd suggest when you are recording your action in Logcat make it a little bit lower, my settings are `Bit Rate (Mbps): 4` and `Resolution (% of native): 50` — z.g.y, Dec 03 '22 at 15:52

score 0 · Accepted Answer · answered Feb 16 '23 at 07:19

hey guys if you want to know how I solved to problem in my own app see this code

end result

https://github.com/dolev146/Politi-Cal/tree/main/app/src/main/java/com/example/politi_cal

this is the navigation file I just used the concept described in the answers to pass the screens as a parameter

something like that where the drawer wrap the content screen

 composable(route = Screen.AdminOnlyScreen.route) {
            DrawerTopBar(navController = navCotroller, screen = { navController ->
                // this is the screen that will be drawn after the drawer
                // swipe screen
                AdminOnlyScreen(navController = navController, auth = auth)

            })
        }

        composable(route = Screen.UserAnalyticsScreen.route) {
            DrawerTopBar(navController = navCotroller, screen = { navController ->
                // this is the screen that will be drawn after the drawer
                // swipe screen


                UserAnalyticsScreen(
                    navController = navController,
                    auth = auth

                )

            })
        }

and the drawer looks like https://github.com/dolev146/Politi-Cal/tree/main/app/src/main/java/com/example/politi_cal/screens/NavDrawer

// the drawer TopBar should get the navController as a parameter ,
// and the composable screen function that it needs to draw after the drawer
@Composable
fun DrawerTopBar(
    navController: NavController,
    auth: FirebaseAuth = FirebaseAuth.getInstance(),
    screen: @Composable (navController: NavController) -> Unit
) {
    var isAdminState by remember {
        mutableStateOf(false)
    }


    val scaffoldState = rememberScaffoldState()
    val scope = rememberCoroutineScope()
    val context = LocalContext.current
    isAdmin(context) {
        isAdminState = true
    }
    var menuContent = mutableListOf(
        MenuItem(
            id = "search",
            title = "Search",
            contentDescription = "Go to Search screen",
            icon = Icons.Default.Search
        ),

//        MenuItem(
//            id = "swipe",
//            title = "Swipe",
//            contentDescription = "Go to Swipe screen",
//            icon = Icons.Default.Home
//        ),
//        MenuItem(
//            id = "preferences",
//            title = "Preferences",
//            contentDescription = "Go to Preferences screen",
//            icon = Icons.Default.Settings
//        ),
//        MenuItem(
//            id = "logout",
//            title = "Logout",
//            contentDescription = "Go to Logout screen",
//            icon = Icons.Default.ExitToApp
//        ),
//        MenuItem(
//            id = "user analytics",
//            title = "User Analytics",
//            contentDescription = "Go to User Analytics screen",
//            icon = Icons.Default.MoreVert
//        )


    )

    if (isAdminState) {

        menuContent.add(
            MenuItem(
                id = "user analytics",
                title = "Analytics",
                contentDescription = "Go to User Analytics screen",
                icon = Icons.Default.MoreVert
            )
        )



        menuContent.add(
            MenuItem(
                id = "add celeb",
                title = "Add Celeb",
                contentDescription = "Go to User profile screen",
                icon = Icons.Default.Add
            )
        )
        menuContent.add(
            MenuItem(
                id = "admin analytics",
                title = "Admin Analytics",
                contentDescription = "Go to Admin Analytics screen",
                icon = Icons.Default.MoreVert
            )
        )
        menuContent.add(
            MenuItem(
                id = "admin user management",
                title = "User Search",
                contentDescription = "Go to Admin User Management screen",
                icon = Icons.Default.MoreVert
            )
        )











        menuContent.add(
            MenuItem(
                id = "logout",
                title = "Logout",
                contentDescription = "Go to Logout screen",
                icon = Icons.Default.ExitToApp
            )
        )


    } else {
        // this is user menu
        menuContent.add(
            MenuItem(
                id = "swipe",
                title = "Swipe",
                contentDescription = "Go to Swipe screen",
                icon = Icons.Default.Home
            )
        )

        menuContent.add(
            MenuItem(
                id = "user analytics",
                title = "Analytics",
                contentDescription = "Go to User Analytics screen",
                icon = Icons.Default.MoreVert
            )
        )

        menuContent.add(
            MenuItem(
                id = "preferences",
                title = "Preferences",
                contentDescription = "Go to Preferences screen",
                icon = Icons.Default.Settings
            )
        )

        menuContent.add(
            MenuItem(
                id = "my profile",
                title = "My Profile",
                contentDescription = "Go to User profile screen",
                icon = Icons.Default.Person
            )
        )














        menuContent.add(
            MenuItem(
                id = "logout",
                title = "Logout",
                contentDescription = "Go to Logout screen",
                icon = Icons.Default.ExitToApp
            )
        )


    }



    Scaffold(

        drawerGesturesEnabled = scaffoldState.drawerState.isOpen,
        scaffoldState = scaffoldState,
        topBar = {
            AppBar(onNavigationIconClick = {
                scope.launch {
                    scaffoldState.drawerState.open()
                }

            })
        },
        drawerContent = {
            DrawerHeader()
            DrawerBody(items = menuContent, onItemClick = {
                when (it.id) {
                    "swipe" -> {
                        navController.navigate(Screen.SwipeScreen.route)
                    }
                    "preferences" -> {
                        navController.navigate(Screen.PreferenceScreen2.route)
                    }
                    "user profile" -> {
                        navController.navigate(Screen.UserProfileScreen.route)
                    }
                    "add celeb" -> {
                        navController.navigate(Screen.AddCelebScreen.route)
                    }
                    "user analytics" -> {
                        navController.navigate(Screen.UserAnalyticsScreen.route)
                    }
                    "logout" -> {
//                        auth.signOut()
                        navController.navigate(Screen.SplashScreen.route)
                    }
                    "search" -> {
                        navController.navigate(Screen.SearchScreen.route)
                    }
                    "my profile" ->{

                        navController.navigate(Screen.UserProfileScreen.route)
                    }


                    "admin only" -> {
                        // check that the user is admin
                        // if not, show a message
                        // if yes, navigate to the admin only screen
                        if (isAdminState) {
                            navController.navigate(Screen.AdminOnlyScreen.route)
                        } else {
                            // show a message
                            Toast.makeText(context, "You are not an admin", Toast.LENGTH_SHORT)
                                .show()
                        }
                    }
                    "admin analytics" -> {
                        navController.navigate(Screen.AdminAnalyticsMenuScreen.route)
                    }
                    "admin user management" -> {
                        navController.navigate(Screen.AdminUserManagementScreen.route)
                    }


                }
            })

        }) {

        screen(navController = navController)

    }
}

watch the full code in the link and please upvote if you liked my solution :) have fun coding

How to pass a Composable to another Composable as its parameter and display/run it in Jetpack Compose

3 Answers3