Last Week

All screen files for the initial version of the app are now in place. Screen navigation is set up.

Example of functional navigation

Tools used:

What does it mean in English?

  • A Development Platform translates my code into languages the end devices understand. In other words, I write in (mostly) English, the platform translates it into ones and zeroes.
  • A User Interface (UI) Framework gives me convenient tools for making on-screen elements. Instead of telling the device “draw a rectangle 100 pixels wide and 50 pixels tall and fill it with blue background and white text,” I can just tell the UI Framework “I need a blue button here please” and the framework takes care of the nitty gritty.
  • A Navigation Library similarly simplifies the task of navigating among different screens. When a user completes login and lands on the main menu page, I just need to tell the library to navigate to said page and it takes care of the rest.

Nerdy Details

How did I use Compose Multiplatform Navigation?

First, include the dependency in the commonMain source set.

kotlin {
    // ...
    sourceSets {
        // ...
        commonMain.dependencies {
            // ...
            implementation("org.jetbrains.androidx.navigation:navigation-compose:2.8.0-alpha10")
        }
        // ...
    }
}

Then, define the routes. Each route is a unique string.

object Routes {
    // ...
    const val LOGIN = "login"
    // ...
}

Instantiate the NavController in a composable and pass it to a NavHost. Create the navigation graph directly inside the NavHost.

@Composable
fun Navigation() {	// This is the function to call when the app starts in the Activity.

    val navController = rememberNavController()

    NavHost(
        navController = navController,
        startDestination = Routes.LOGIN
    ) {
        // ...
        composable(route = Routes.LOGIN) {
            LoginScreen(navController)	// Pass the NavController here for the screen to use for navigation
        }
        // ...
    }

It is now ready to navigate! In the composable, simply call:

navController.navigate(route = Routes.LOGIN)

Next Week

  • Investigate Supabase.
  • Set up ViewModel for login screen.
  • Setup Koin Dependency Injection.
  • Implement one method (email OTP) for Supabase Auth for login screen.
  • Stretch goal: refactor supabase auth into proper data store paradigm.