Compose Locations – Navigation Library

That is a part of the Jetpack Compose navigation sequence:

In my earlier put up, I construct a quite simple Jetpack Compose Navigation and use the NavRoute sealed class to keep away from arduous coding strings in a number of locations.

Nonetheless, a greater answer could also be simply utilizing this superior Compose Locations library! Let’s have a look at how we are able to convert this app to make use of this library.

Setup construct.gradle (module degree)

1. Add KSP Plugin

Add com.google.devtools.ksp plugin

plugins { 
    ... 
    id 'com.google.devtools.ksp' model '1.6.10-1.0.2' 
}

2. Add Generated KSP Path

Add generated KSP path contained in the android block

android {
    ...
    applicationVariants.all { variant ->
        kotlin.sourceSets {
            getByName(variant.title) {
                kotlin.srcDir("construct/generated/ksp/${variant.title}/kotlin")
            }
        }
    }
}

3. Add Compose Vacation spot Dependencies

dependencies {
    ...
    implementation 'io.github.raamcosta.compose-destinations:core:1.5.1-beta'
    ksp 'io.github.raamcosta.compose-destinations:ksp:1.5.1-beta'   
}

For construct.gradle.kts instance, you may discuss with this commit right here.

Construct Navigation Graph

Current navigation graph associated code (i.e. BuildNavGraph() and NavRoute) code could be eliminated fully and changed with compose locations annotations.

1. Annotate Screens with @Vacation spot

Annotate all composable screens with @Vacation spot

@Vacation spot 
@Composable 
enjoyable LoginScreen( ... ) { 
    ...
}

@Vacation spot
@Composable 
enjoyable HomeScreen( ... ) { 
    ... 
}

@Vacation spot 
@Composable 
enjoyable ProfileScreen( ... ) { 
    ... 
}

@Vacation spot 
@Composable
enjoyable SearchScreen( ... ) { 
    ...
}

2. Annotate Begin Display with @RootNavGraph(begin = true)

@RootNavGraph(begin = true)
@Vacation spot
@Composable
enjoyable LoginScreen(
    ...
) {
    ...
}

After you annotate the composable display screen, be sure to Rebuild Undertaking so all the mandatory generated code will likely be generated.

3. Change NavHostController with DestinationsNavigator

Within the unique login composable display screen, it has this navigateToHome callback.

enjoyable LoginScreen(
    navigateToHome: () -> Unit
) {
    ...
}

Now, it may be changed with DestinationsNavigator parameter.

enjoyable LoginScreen( 
    navigator: DestinationsNavigator 
) { 
    ... 
}

To navigate, the unique implementation use NavHostController

navController.navigate(NavRoute.Dwelling.path)

and now’s changed with DestinationsNavigator

navigator.navigate(HomeScreenDestination)

HomeScreenDestination is the generated code.

Another conversion examples under

navController.popBackStack() 

navigator.popBackStack()



navController.navigate(NavRoute.Profile.withArgs(id.toString(), showDetails.toString())) 

navigator.navigate(ProfileScreenDestination(7, true))



navController.navigate(NavRoute.Login.path) {
    popUpTo(NavRoute.Login.path) {inclusive = true} 
} 

navigator.navigate(LoginScreenDestination) { 
    popUpTo(LoginScreenDestination.route) {inclusive = true} 
}

As you may see, the DestinationsNavigator is principally a wrapper for NavHostController which makes it rather a lot simpler.

4. Name DestinationsNavHost() in the primary composable display screen

Change BuildNavGraph()

@Composable 
personal enjoyable MainScreen() { 
    SimpleNavComposeAppTheme {
        val navController = rememberNavController() 
        BuildNavGraph(navController) 
    }
}

with DestinationsNavHost()

@Composable
personal enjoyable MainScreen() {
    SimpleNavComposeAppTheme {
        DestinationsNavHost(navGraph = NavGraphs.root)
    }
}

5. Use EmptyDestinationsNavigator in @Preview

Because of the creator of this library, Rafael Costa instructed me that I can truly use EmptyDestinationsNavigator as null implementation and used it for @preview as a substitute of passing innull.

As an alternative of passing in navigator = null, I can go in navigator = EmptyDestinationsNavigator.

@Preview(showBackground = true)
@Composable
personal enjoyable DefaultPreview() {
    SimpleNavComposeAppTheme(useSystemUiController = false) {
        Floor(
            modifier = Modifier.fillMaxSize(),
            shade = MaterialTheme.colours.background
        ) {     
            HomeScreen(navigator = EmptyDestinationsNavigator)
       }
    }
}

By doing that, I need not declare navigator: DestinationsNavigator? nullable variable parameter within the composable operate.

Achieved!

Conclusion

This library is superior! It eliminates a lot boilerplate code. One factor I want is I need not arrange as in Step 1 – Add KSP Plugin and Step 2 – Add Generated KSP Path above, however possibly that isn’t technically possible.

Supply Code