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 forNavHostController
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.