First, let's declare some destinations, in Guia, they are called a NavigationKey
Copy @Parcelize
class HomeKey : NavigationKey
@Parcelize
class ProfileKey ( val profileId: String ): NavigationKey
Then we declare a Navigator :
Copy val navigator = rememberNavigator (initialKey = HomeKey ()) // Initial Key is optional
To link a NavigationKey to a Composable we can use the builder
parameter in rememberNavigator
:
Copy 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
Copy 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 )
Copy @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:
Copy 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.