Quick Start
First, let's declare some destinations, in Guia, they are called a NavigationKey
@Parcelize
class HomeKey: NavigationKey
@Parcelize
class ProfileKey(val profileId: String): NavigationKey
Then we declare a Navigator:
val navigator = rememberNavigator(initialKey = HomeKey()) // Initial Key is optional
To link a NavigationKey to a Composable we can use the builder
parameter in rememberNavigator
:
val navigator = rememberNavigator(initialKey = HomeKey()) {
screen<HomeKey> { HomeScreen() }
bottomSheet<ProfileKey> { key -> ProfileScreen(profileId = key.profileId) }
dialog<DialogKey> { DialogScreen() }
}
Alternatively, a key can host its own Composable, called a NavigationNode, then we don't need to declare it in our builder, the builder is convenient in Multi Module projects
class DetailsBottomSheetKey(
val item: String
) : NavigationKey.WithNode<BottomSheet> {
override fun navigationNode() = BottomSheet {
Text(text = "Item: $item")
}
}
To get the instance of our navigator and do some navigation:
(For a list of all default operations provided by Guia check Navigation Operations)
@Composable
fun HomeScreen() {
val navigator = requireLocalNavigator()
// On Button click or some other event
navigator.push(ProfileKey("some_id"))
// We can also go back by calling pop
navigator.pop()
}
Finally we render the navigator's state:
navigator.NavContainer()
We can also add some Transitions, type-safe Results, bottom-nav behaviour and more. Check The Lore for more comprehensive usage of Guia.
Last updated