Skip to Content
Course content

233: Building a Multiplatform To-Do App

Click on the "Edit" button in the top corner of the screen to edit your slide content.

Where should the actual "To-Do" logic live so I don't write it twice?

Look, the whole point of Kotlin Multiplatform (KMP) is to avoid the "copy-paste" dance between Android and iOS. For a To-Do app, your data models and business logic—like validating that a task isn't empty or filtering completed items—belong in commonMain. I always recommend starting with a simple data class that both platforms can see.

// In commonMain
data class TodoItem(
    val id: Long, 
    val title: String, 
    val isCompleted: Boolean = false,
    val priority: Priority = Priority.MEDIUM
)

enum class Priority { LOW, MEDIUM, HIGH }

By keeping this in commonMain, you ensure that if you add a "Priority" field later, you aren't hunting through two different projects to update the model. You define it once, and the Kotlin compiler handles the rest.

How do I handle the database since iOS and Android store data differently?

This is where people usually get stuck. You can't just throw a Room database into the shared module because Room is heavily tied to Android. Instead, use SQLDelight. It's the gold standard for KMP because it generates typesafe Kotlin APIs from actual SQL statements.

The trick is the expect/actual pattern for the database driver. You define the "expectation" in common code and provide the "actual" implementation for each platform. It looks something like this:

// In commonMain
expect class DatabaseDriverFactory {
    fun createDriver(): SqlDriver
}

// In androidMain
actual class DatabaseDriverFactory(private val context: Context) {
    actual fun createDriver(): SqlDriver {
        return AndroidSqliteDriver(TodoDatabase.Schema, context, "todo.db")
    }
}

// In iosMain
actual class DatabaseDriverFactory {
    actual fun createDriver(): SqlDriver {
        return NativeSqliteDriver(TodoDatabase.Schema, "todo.db")
    }
}

I've found that setting this up early saves you a massive headache. You write your SQL in a .sq file, and SQLDelight gives you a TodoQueries object that you can use in your shared repository regardless of whether you're on an iPhone or a Pixel.

How do I make the UI update instantly when a task is checked off?

You don't want your UI to manually poll the database. Instead, use StateFlow in a shared ViewModel. Since we're using Compose Multiplatform, the UI can just "collect" this flow. When the database changes, the flow emits a new list, and the UI snaps into place.

Here is a simplified version of how I'd structure the shared ViewModel logic:

class TodoViewModel(private val repository: TodoRepository) {
    private val _todos = MutableStateFlow<List<TodoItem>>(emptyList())
    val todos: StateFlow<List<TodoItem>> = _todos.asStateFlow()

    fun toggleTodo(id: Long, isCompleted: Boolean) {
        viewModelScope.launch {
            repository.updateTodoStatus(id, isCompleted)
            // Refresh the flow from the DB
            _todos.value = repository.getAllTodos()
        }
    }
}

By keeping the StateFlow in the shared module, you've effectively written your "state management" once. Your Android Compose code and your iOS Compose code (or SwiftUI) just listen to that same stream of data. It makes the app feel snappy and keeps the platforms perfectly in sync.




📋 Practical Task

Implement a Priority-Based Filter for the To-Do List

Right now, the app shows all tasks in a single list. Your task is to extend the shared logic to allow filtering by priority.

  • Modify the TodoViewModel to include a currentFilter StateFlow that holds a Priority value (or a "All" option).
  • Update the todos flow in the ViewModel to use combine, so it automatically filters the list from the repository based on the currently selected priority.
  • Ensure that when the user changes the filter, the UI updates without needing to reload the entire database.
Rating
0 0

There are no comments for now.

to be the first to leave a comment.