How to set dynamic position of snackbar in jetpack compose?

Viewed 332

I have a Scaffold with a NavHost as its content. NavHost host 2 screens. One screen contains the bottomNavigationBar and another screen doesnot.

How can I display create a snack bar that can be used globally which is displayed at the bottom of the screen if no bottomNavigationView is there but adds a bottom padding of height = bottomNavigationHeight if the screen contains bottomNavigationView?

Below is my main content:


@Composable
fun MainScreen() {
    val navController = rememberNavController()
    val scaffoldState = rememberScaffoldState()
    Scaffold(
        scaffoldState = scaffoldState
    ) {
        NavHost(navController = navController, "first") {
            composable("first") {
                FirstScreen()
            }
            composable("second") {
                SecondScreen()
            }
        }

    }
}

My first screen.

// No bottom navigation
@Composable
fun FirstScreen() {
    Text("Hello World")
}

My second screen:

// Contains bottom nav
@Composable
fun SecondScreen() {
    Scaffold(bottomBar = { MyBottomBar() }) {

    }
}

Now, I can use CompositionLocal to send snackBarHostState from scaffold state to all my screens. But, I want first screen to display the snack bar without bottom padding and second screen to display the snack bar with padding for the bottomNavView.

How can I achieve the dynamic position of snackBar??

P.S. This is a simplified version of my issue. I have about 6-7 screen for my MainContent and many screens for the screen with bottom nav.

0 Answers
Related