NavHost and NavController in Android Kotlin - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a NavHost in a Compose UI.

Android Kotlin

NavHost(navController = [1], startDestination = "home") {
    composable("home") { HomeScreen() }
}

Drag options to blanks, or click blank then click option'

AnavController

BrememberNavController()

CNavController()

DNavHostController()

Attempts:

3 left

💡 Hint

Common Mistakes

Using NavController() directly causes errors because it needs to be remembered.

Using undefined variables like navController without initialization.

The rememberNavController() function creates and remembers a NavController instance for navigation.

2fill in blank

medium

Complete the code to navigate to the "details" screen using NavController.

Android Kotlin

navController.[1]("details")

Drag options to blanks, or click blank then click option'

AgoTo

Bmove

Cnavigate

DswitchTo

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-existent functions like goTo or move causes compile errors.

Confusing navigation with fragment transactions.

The navigate() function is used to move to a different destination in the navigation graph.

3fill in blank

hard

Fix the error in the code to get the current back stack entry from NavController.

Android Kotlin

val currentBackStackEntry = navController.[1]

Drag options to blanks, or click blank then click option'

AcurrentBackStackEntryAsState

BcurrentBackStackEntryAsState()

CcurrentBackStackEntry

DgetCurrentBackStackEntry()

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses makes it a function call which does not exist.

Using the property without 'AsState' does not provide Compose state.

The property currentBackStackEntryAsState provides a state object to observe the current back stack entry in Compose.

4fill in blank

hard

Fill both blanks to define a composable destination with a route and content.

Android Kotlin

NavHost(navController, startDestination = "home") {
    composable(route = [1]) { [2] }
}

Drag options to blanks, or click blank then click option'

A"home"

BHomeScreen()

C"details"

DDetailsScreen()

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing route strings and composable calls.

Forgetting quotes around route strings.

The route string must match the destination name, and the composable content is the screen function.

5fill in blank

hard

Fill all three blanks to create a NavHost with a remembered NavController and navigate to "profile" on button click.

Android Kotlin

val navController = [1]()

NavHost(navController = navController, startDestination = "home") {
    composable("home") {
        Button(onClick = { navController.[2]("profile") }) {
            Text(text = [3])
        }
    }
    composable("profile") { ProfileScreen() }
}

Drag options to blanks, or click blank then click option'

ArememberNavController

Bnavigate

C"Go to Profile"

DnavigateTo

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong function names like navigateTo or missing parentheses.

Forgetting quotes around button text.

Use rememberNavController() to create the controller, navigate() to move screens, and a string for button text.