Compose Locations – Navigation Library

That is a part of the Jetpack Compose navigation sequence:

In my earlier publish, I construct a quite simple Jetpack Compose Navigation and use the NavRoute sealed class to keep away from exhausting 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 will convert this app to make use of this library.

Setup construct.gradle (module stage)

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 possibly can seek advice from this commit right here.

Construct Navigation Graph

Current navigation graph associated code (i.e. BuildNavGraph() and NavRoute) code may 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 screen with @RootNavGraph(begin = true)

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

After you annotate the composable display screen, be sure to Rebuild Challenge so all the required generated code will probably be generated.

3. Exchange 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 could be changed with DestinationsNavigator

navigator.navigate(HomeScreenDestination)

HomeScreenDestination is the generated code.

Another conversion examples beneath

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 possibly can see, the DestinationsNavigator is mainly a wrapper for NavHostController which makes it lots simpler.

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

Exchange BuildNavGraph()

@Composable 
non-public enjoyable MainScreen() { 
    SimpleNavComposeAppTheme {
        val navController = rememberNavController() 
        BuildNavGraph(navController) 
    }
}

with DestinationsNavHost()

@Composable
non-public enjoyable MainScreen() {
    SimpleNavComposeAppTheme {
        DestinationsNavHost(navGraph = NavGraphs.root)
    }
}

5. Use EmptyDestinationsNavigator in @Preview

Due to the writer of this library, Rafael Costa informed me that I can really use EmptyDestinationsNavigator as null implementation and used it for @preview as an alternative of passing innull.

As a substitute of passing in navigator = null, I can cross in navigator = EmptyDestinationsNavigator.

@Preview(showBackground = true)
@Composable
non-public 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.

Carried out!

Conclusion

This library is superior! It removes 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