DEV Community

yu
yu

Posted on • Edited on

How to Integrate Koin and Circuit in Compose Multiplatform

#kotlin #multiplatform #koin #circuit

Building user interfaces (UIs) with Compose Multiplatform is becoming popular. When building your app, you might look for good ways to structure it. For UI architecture, you can use Circuit from Slack. For dependency injection, you can use Koin. They work well together.

This article explains how to use Koin and Circuit together in a Compose Multiplatform project. We will create a simple app that moves between two screens. This will help you understand how they connect.

What are Koin and Circuit?

  • Koin: A simple dependency injection tool for Kotlin. It helps you manage the parts of your application in an easy way.
  • Circuit: A library from Slack for UI architecture. It helps you build UIs that are based on state and events. This makes your UI code separate from the platform it runs on. It is built for Jetpack Compose and works well with Compose Multiplatform.

Step 1: Add Dependencies

First, we need to add the Koin and Circuit libraries to our project.

1.1. Define Versions in gradle/libs.versions.toml

In your gradle/libs.versions.toml file, add the versions and libraries:

[versions]
koin = "4.1.0"
circuit = "0.29.1"
# ... other versions

[libraries]
koin-compose = { group = "io.insert-koin", name = "koin-compose", version.ref = "koin" }
circuit = { group = "com.slack.circuit", name = "circuit-foundation", version.ref = "circuit" }
# ... other libraries
Enter fullscreen mode Exit fullscreen mode

1.2. Add Dependencies in composeApp/build.gradle.kts

Next, add these libraries to the commonMain source set in your composeApp/build.gradle.kts file. This makes Koin and Circuit available for all platforms your app supports.

// ...
kotlin {
    // ...
    sourceSets {
        // ...
        commonMain.dependencies {
            // ...
            implementation(libs.koin.compose)
            implementation(libs.circuit)
        }
        // ...
    }
}
// ...
Enter fullscreen mode Exit fullscreen mode

Step 2: Create Screens with Circuit

Now that the libraries are added, we can create our screens. We will use Circuit's main parts: Screen, Presenter, and the UI. We will make two screens: FooScreen and BarScreen.

2.1. FooScreen: The First Screen

FooScreen is the first screen the user will see. It has a button to go to BarScreen.

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/ui/foo/FooScreen.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.ui.foo

import com.slack.circuit.runtime.CircuitUiEvent
import com.slack.circuit.runtime.CircuitUiState
import com.slack.circuit.runtime.screen.Screen

data object FooScreen : Screen {
    data class State(
        val eventSink: (Event) -> Unit,
    ) : CircuitUiState

    sealed class Event : CircuitUiEvent {
        data object NavigateBarButtonClicked : Event()
    }
}
Enter fullscreen mode Exit fullscreen mode

The FooPresenter contains the logic for navigation.

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/ui/foo/FooPresenter.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.ui.foo

import androidx.compose.runtime.Composable
import com.slack.circuit.runtime.CircuitContext
import com.slack.circuit.runtime.Navigator
import com.slack.circuit.runtime.presenter.Presenter
import com.slack.circuit.runtime.screen.Screen
import dev.yuyuyuyuyu.koincircuitintegrationexample.ui.bar.BarScreen

class FooPresenter(
    private val navigator: Navigator,
) : Presenter<FooScreen.State> {
    @Composable
    override fun present(): FooScreen.State {
        return FooScreen.State { event ->
            when (event) {
                FooScreen.Event.NavigateBarButtonClicked -> navigator.goTo(BarScreen)
            }
        }
    }

    class Factory : Presenter.Factory {
        override fun create(screen: Screen, navigator: Navigator, context: CircuitContext): Presenter<*>? {
            return when (screen) {
                is FooScreen -> FooPresenter(navigator = navigator)
                else -> null
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Here is the UI for FooScreen:

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/ui/foo/Foo.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.ui.foo

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun Foo(state: FooScreen.State, modifier: Modifier = Modifier) = Column(
    modifier = modifier.fillMaxSize(),
    verticalArrangement = Arrangement.spacedBy(space = 16.dp, alignment = Alignment.CenterVertically),
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    Text("Foo screen")
    Button(
        content = { Text("Navigate to Bar screen") },
        onClick = { state.eventSink(FooScreen.Event.NavigateBarButtonClicked) },
    )
}
Enter fullscreen mode Exit fullscreen mode

2.2. BarScreen: A Screen with Dependencies

BarScreen shows how a presenter can get dependencies from Koin. It has a button that uses a HelloUseCase and another button to go back.

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/ui/bar/BarScreen.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.ui.bar

import com.slack.circuit.runtime.CircuitUiEvent
import com.slack.circuit.runtime.CircuitUiState
import com.slack.circuit.runtime.screen.Screen

data object BarScreen : Screen {
    data class State(
        val eventSink: (Event) -> Unit,
    ) : CircuitUiState

    sealed class Event : CircuitUiEvent {
        data object HelloButtonClicked : Event()
        data object NavigateBackButtonClicked : Event()
    }
}
Enter fullscreen mode Exit fullscreen mode

The BarPresenter needs a HelloUseCase to work.

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/ui/bar/BarPresenter.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.ui.bar

import androidx.compose.runtime.Composable
import com.slack.circuit.runtime.CircuitContext
import com.slack.circuit.runtime.Navigator
import com.slack.circuit.runtime.presenter.Presenter
import com.slack.circuit.runtime.screen.Screen
import dev.yuyuyuyuyu.koincircuitintegrationexample.domain.useCase.HelloUseCase

class BarPresenter(
    private val navigator: Navigator,
    private val helloUseCase: HelloUseCase,
) : Presenter<BarScreen.State> {
    @Composable
    override fun present(): BarScreen.State {
        return BarScreen.State { event ->
            when (event) {
                BarScreen.Event.HelloButtonClicked -> helloUseCase()
                BarScreen.Event.NavigateBackButtonClicked -> navigator.pop()
            }
        }
    }

    class Factory(
        private val helloUseCase: HelloUseCase,
    ) : Presenter.Factory {
        override fun create(screen: Screen, navigator: Navigator, context: CircuitContext): Presenter<*>? {
            return when (screen) {
                is BarScreen -> BarPresenter(helloUseCase = helloUseCase, navigator = navigator)
                else -> null
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

Here is the UI for BarScreen:

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/ui/bar/Bar.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.ui.bar

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun Bar(state: BarScreen.State, modifier: Modifier) = Column(
    modifier = modifier.fillMaxSize(),
    verticalArrangement = Arrangement.spacedBy(space = 16.dp, alignment = Alignment.CenterVertically),
    horizontalAlignment = Alignment.CenterHorizontally,
) {
    Text("Bar screen")
    Button(
        content = { Text("Hello, world!") },
        onClick = {
            state.eventSink(BarScreen.Event.HelloButtonClicked)
        },
    )
    Button(
        content = { Text("Navigate back") },
        onClick = {
            state.eventSink(BarScreen.Event.NavigateBackButtonClicked)
        },
    )
}
Enter fullscreen mode Exit fullscreen mode

Step 3: Create Koin Modules

Now, we will create Koin modules. These modules will provide the dependencies for our application. This includes the Circuit object and other dependencies like HelloUseCase.

3.1. Domain and Data Modules

First, we create modules for our domain and data layers. In this example, we only have a simple HelloUseCase.

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/di/domainModule.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.di

import dev.yuyuyuyuyu.koincircuitintegrationexample.domain.useCase.HelloUseCase
import org.koin.core.module.dsl.singleOf
import org.koin.dsl.module

val domainModule = module {
    singleOf(::HelloUseCase)
}
Enter fullscreen mode Exit fullscreen mode

We also have a dataModule. But this sample app does not have a data layer, so the module is empty.

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/di/dataModule.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.di

import org.koin.dsl.module

val dataModule = module {
    // add modules if needed
}
Enter fullscreen mode Exit fullscreen mode

3.2. UI Module with Circuit

Next, we create a uiModule that provides the Circuit object. This is where we connect Koin and Circuit. We set up Circuit with our screens and presenters. We use Koin's get() function to give the HelloUseCase to the BarPresenter.Factory.

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/di/uiModule.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.di

import com.slack.circuit.foundation.Circuit
import dev.yuyuyuyuyu.koincircuitintegrationexample.ui.bar.Bar
import dev.yuyuyuyuyu.koincircuitintegrationexample.ui.bar.BarPresenter
import dev.yuyuyuyuyu.koincircuitintegrationexample.ui.bar.BarScreen
import dev.yuyuyuyuyu.koincircuitintegrationexample.ui.foo.Foo
import dev.yuyuyuyuyu.koincircuitintegrationexample.ui.foo.FooPresenter
import dev.yuyuyuyuyu.koincircuitintegrationexample.ui.foo.FooScreen
import org.koin.dsl.module

val uiModule = module {
    single {
        Circuit.Builder()
            .addUi<FooScreen, FooScreen.State> { state, modifier ->
                Foo(state = state, modifier = modifier)
            }
            .addPresenterFactory(factory = FooPresenter.Factory())

            .addUi<BarScreen, BarScreen.State> { state, modifier ->
                Bar(state = state, modifier = modifier)
            }
            .addPresenterFactory(
                factory = BarPresenter.Factory(
                    helloUseCase = get()
                )
            )

            .build()
    }
}
Enter fullscreen mode Exit fullscreen mode

3.3. Application Module

Finally, we create a main application module that includes all the other modules.

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/di/koinCircuitIntegrationExampleAppModule.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.di

import org.koin.dsl.module

val koinCircuitIntegrationExampleAppModule = module {
    includes(uiModule, domainModule, dataModule)
}
Enter fullscreen mode Exit fullscreen mode

Step 4: Connect Koin and Circuit in the Main App

Now that we have our screens and Koin modules, the last step is to connect them in our main composable. We will use the KoinApplication composable to start Koin. We will use CircuitCompositionLocals to give the Circuit object to our UI.

composeApp/src/commonMain/kotlin/dev/yuyuyuyuyu/koincircuitintegrationexample/ui/KoinCircuitIntegrationExampleApp.kt

package dev.yuyuyuyuyu.koincircuitintegrationexample.ui

import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import com.slack.circuit.backstack.rememberSaveableBackStack
import com.slack.circuit.foundation.CircuitCompositionLocals
import com.slack.circuit.foundation.NavigableCircuitContent
import com.slack.circuit.foundation.rememberCircuitNavigator
import dev.yuyuyuyuyu.koincircuitintegrationexample.di.koinCircuitIntegrationExampleAppModule
import dev.yuyuyuyuyu.koincircuitintegrationexample.ui.foo.FooScreen
import org.jetbrains.compose.ui.tooling.preview.Preview
import org.koin.compose.KoinApplication
import org.koin.compose.koinInject

@Composable
@Preview
fun KoinCircuitIntegrationExampleApp() {
    val backStack = rememberSaveableBackStack(root = FooScreen)
    val navigator = rememberCircuitNavigator(backStack) {}

    KoinApplication(
        application = {
            printLogger()
            modules(koinCircuitIntegrationExampleAppModule)
        },
    ) {
        MaterialTheme {
            CircuitCompositionLocals(circuit = koinInject()) {
                NavigableCircuitContent(navigator, backStack)
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

This is how it works:

  1. KoinApplication starts Koin with our koinCircuitIntegrationExampleAppModule.
  2. koinInject() gets the Circuit object that we defined in our uiModule.
  3. CircuitCompositionLocals makes the Circuit object available to all composables in the UI tree.
  4. NavigableCircuitContent uses the Circuit object to manage screen navigation and display.

A big benefit of the koin-compose library is the KoinApplication composable. If your Compose Multiplatform project does not use Android, you do not need to call startKoin { ... } for each platform. You can just use KoinApplication in your main composable to make Koin available.

Conclusion

When you use Koin and Circuit together, you get two big benefits. Circuit gives you a clean UI architecture. Koin gives you a simple way to manage dependencies. This combination helps you build Compose Multiplatform applications that are easy to scale, test, and maintain. The setup is simple and gives you a strong base for managing dependencies in your whole app, from the data layer to the UI presenters.

Happy coding!

Top comments (0)