What I use:
Kotlin, Jetpack Compose
What I want to do:
After clicking "Log In" text I would want to navigate user to the log in form
What I currently have:
MainActivity.kt
class MainActivity : ComponentActivity() {
private val viewModel: MainActivityViewModel by viewModels()
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
installSplashScreen().apply {
setKeepOnScreenCondition {
viewModel.isLoading.value
}
}
setContent {
RestaurantioTheme {
Surface(Modifier.fillMaxSize()) {
val navController = rememberNavController()
Scaffold(
content = {padding ->
Column(
modifier = Modifier.padding(padding)
) {
Navigation(navController = navController)
}
},
bottomBar = {
BottomNavigationBar(
items = listOf(
BottomNavItem(
name = "Home",
route = "home",
icon = Icons.Outlined.Home
),
BottomNavItem(
name = "Orders",
route = "orders",
icon = Icons.Outlined.ShoppingBag
),
BottomNavItem(
name = "Map",
route = "map",
icon = Icons.Outlined.Map
),
BottomNavItem(
name = "Profile",
route = "profile",
icon = Icons.Outlined.Person
),
),
navController = navController,
onItemClick = {
navController.navigate(it.route) {
popUpTo(navController.graph.findStartDestination().id) {
saveState = true
}
launchSingleTop = true
restoreState = true
}
}
)
}
)
}
}
}
}
}
BottomNav.kt
@Composable
fun Navigation (navController: NavHostController) {
NavHost(navController = navController, startDestination = "home" ) {
composable("home") {
HomeScreen()
}
composable("orders") {
OrdersScreen()
}
composable("map") {
MapScreen()
}
composable("profile") {
ProfileScreen()
}
composable("login") {
MapScreen()
}
}
}
What I have tried:
Inside my ProfileScreen() Composable I have
ClickableText(
AnnotatedString("Log In"),
onClick = {
})
But I can't navigate to login screen. I've tried something like this:
val navController = rememberNavController()
Navigation(navController)
ClickableText(
AnnotatedString("Log In"),
onClick = {
navController.navigate("login")
})
but it doesn't work as intended, because I have HomeScreen(start screen) on top of my ProfileScreen, and after clicking LogIn text I have this "temporary" MapScreen.
I know that I'm doing something wrong, but I've just started learning compose and I can't really understand navigation documentation for nested navigation, which as I suppose should be used here.
If it helps, below is the beginning of ProfileScreen Composable, maybe I have to pass some argument there.
@Composable
fun ProfileScreen(viewModel: AuthenticationViewModel = androidx.lifecycle.viewmodel.compose.viewModel()) {
...
}
picture from emulator