DEV Community: Isaac Akakpo

Dependency Gaps in Compose Multiplatform (and how I solved them)

Isaac Akakpo — Thu, 18 Sep 2025 22:33:55 +0000

Intro

JetBrains' flagship framework for mobile platforms, Kotlin Multiplatform, has come a long way, evolving to offer the promise of "write once, run everywhere." The framework allows you to share business logic across platforms, which required native UI implementations for each platform. With the advent of Compose Multiplatform, JetBrains has taken this concept even further, enabling a true "write once, run everywhere" experience. Built on top of Kotlin Multiplatform, Compose Multiplatform allows developers to share both UI and business logic across all supported platforms, including Android, iOS, Web (via Wasm), and Desktop (via JVM).

While this is a major leap forward, it’s important to acknowledge that Compose Multiplatform doesn't fully solve the challenge of a one-codebase approach for all platforms. There are still some gaps that developers need to address. JetBrains has done a commendable job in creating a unified experience, but platform-specific adjustments are often necessary.

One of the key tools in achieving this is the expect/actual mechanism. Simply put, this approach allows developers to define common logic in the "expect" block, while providing platform-specific implementations in the "actual" block. This means that if Compose Multiplatform doesn’t meet the needs of a particular platform, developers can define platform-specific functionality with the actual keyword.

As a result, it’s mandatory to have an actual function for each platform in your Compose Multiplatform project to fill these gaps. This ensures that your application can fully leverage platform-specific features while maintaining the core benefits of code sharing

The Gap?

You may have to write expect/actual functions for each platform. For instance,the Google's androidx-libraries made for KMP are usually made to support just the mobile platforms (and maybe for JVM) however the Wasm targets lack. Hence having duplicate actuals for iOS, Android, & Desktop just doesn't comply to standard coding practices and can result in code repition.

An example, showing the RevenueCat SDK used in commomMain results in a Could not resolve error for Wasm and Desktop targets

Gradle module to the Rescue

To address this issue, we can create simple, dedicated modules and designate the root directory as a source root. This structure will house all the common code shared across specific platforms, providing a clean and effective solution. Let’s use the Room Database library as an example, which works across iOS, Android, and Desktop (JVM) platforms

We create a nonWasmModule. While the name may seem unusual, it serves its purpose. This module contains just one actual function for the expect method (defined in commonMain), and for Wasm, we can use the web’s local storage as an alternative. This approach solves the problem.

Similarly, for the mobile platforms (iOS and Android), we create a mobileModule, set it as the source root, and include the actual functions, objects, or classes specific to mobile.

Finally, we update the Gradle file at the app level to ensure the new modules depend on the common module, inheriting all shared dependencies between platforms.

Animating Composables. (Bonus - Creating a Clock View with Canvas Api)

Isaac Akakpo — Sat, 05 Feb 2022 16:53:21 +0000

Link to Source Code

Animating Position Changes

Isaac Akakpo — Sat, 05 Feb 2022 16:44:37 +0000

We'll be looking at how to animate position changes using Dp in this series.

Let's define the card position as Enum's

//

enum class CardPosition {
    IS_LEFT,
    IS_RIGHT
}

We'll be using a BoxWithConstraints for this mainly it returns as the current size of the box where we could use the offset modifier to set the current position

BoxWithConstraints(
        modifier = Modifier
            .fillMaxWidth()
            .padding(5.dp)
            .border(width = 2.dp, shape = RoundedCornerShape(15), color = Blue)
            .background(color = Color.Transparent, shape = RoundedCornerShape(15))
    ) {

      // --> 1
        var currentState by remember { mutableStateOf(CardPosition.IS_LEFT) }
// --> 2
        val transition = updateTransition(currentState, label = "First Trans")
// --> 3
        val color by transition.animateColor(transitionSpec = {
            tween(800, easing = LinearOutSlowInEasing)
        }, label = "") {
            when (it) {
                CardPosition.IS_RIGHT ->
                    Blue
                else -> Green
            }
        }

// --> 4
        val xOffset by transition.animateDp(
            transitionSpec = {
                tween(800, easing = LinearOutSlowInEasing)


            }, label = "xOffset"
        ) { state ->
            when (state) {
                CardPosition.IS_LEFT -> 0.dp
                CardPosition.IS_RIGHT -> this.maxWidth - 165.dp
            }
        }




        Card(
            elevation = 3.dp,
            shape = RoundedCornerShape(100),
            backgroundColor = color,
            onClick = {
                currentState = if (currentState == CardPosition.IS_LEFT) {
                    CardPosition.IS_RIGHT
                } else {
                    CardPosition.IS_LEFT

                }
            }, indication = rememberRipple(),
            modifier = Modifier
// --> 5
                .offset(x = xOffset, 0.dp)
                .padding(vertical = 15.dp, horizontal = 5.dp)
                .width(150.dp)
        ) {
            Text(
                text = if (currentState == CardPosition.IS_LEFT) "Move To Right" else "Move To Left",
                textAlign = TextAlign.Center,
                color = White,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(horizontal = 20.dp, vertical = 5.dp)
            )
        }

    }

We set the current position of the Card.
Use the updateTransition.. animations api to hold the current position.
Learn more about updateTransition
Since we want to change the color on whether the card is at the right or left we declare a color variable update the current color accordingly
We need an xOffSet to determine and set the current position of the card.
Finally we set this using the offset modifier in Dp. (NB: This could also be done with IntOffSet{} for int values)

Link to Source Code

Animating Composables (animateDpAsState)

Isaac Akakpo — Fri, 04 Feb 2022 19:56:04 +0000

For this Series, We're going to animate the size of a box based on changing sizes.
We'll try to create something like a size palette.

This follows same procedure as animateColorAsState but here we specify a Dp instead.

// --> 1
 val realCardSize = remember {
        mutableStateOf(100)
    }

//-->2
    val stateCardSize = animateDpAsState(targetValue = realCardSize.value.dp )


// --> 3
    Column(modifier = Modifier.fillMaxSize()) {
        Card(
            modifier = Modifier
                .align(Alignment.CenterHorizontally)
                .padding(10.dp)
                .size(stateCardSize.value),
            backgroundColor = Green,
            elevation = 3.dp
        ) {
            Box(modifier = Modifier.fillMaxSize()) {
                Text(text = "Current Size : ", modifier = Modifier.align(Alignment.Center))
            }
        }

// --> 4
        val cardSizes = listOf(100, 300, 500)

Declare the size of the box as an Integer(this could also be in Dp primarily so there's no need for conversion)
Define animateDpAsState variable and give it a targetValue of realCardSize
Here we create a Column parent view to host the Card and the list of size buttons.
We then declare a list of sizes we want the Box to take.

Let's now build the Chips sizeButtonItems at the bottom of the card

@ExperimentalMaterialApi
@Composable
fun ChipSizeItem(
    index: Int,
    isChecked: Boolean,
    size: Int,
    onChecked: (index: Int, size: Int) -> Unit
) {

// --> 5
    val chipColour = animateColorAsState(targetValue = if (isChecked) Green else White)
    Card(
        backgroundColor = chipColour.value,
        elevation = 3.dp,
        shape = RoundedCornerShape(100),
        modifier = Modifier.padding(5.dp).toggleable(value = isChecked,onValueChange = {
           // --> 6
            onChecked(index, size)
        })
    ) {
        Text(text = "$size.dp", modifier = Modifier.padding(horizontal = 20.dp, vertical = 5.dp))
    }
}

Set the chip Color based on the current selected chip size.
Return the index and size of the box when a chip is selected.

// --> 7

        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.Center) {
            var currentIndex by remember {
                mutableStateOf(0)
            }

            cardSizes.forEachIndexed { cardIndex, cardSize ->
                ChipSizeItem(
                    index = cardIndex,
                    isChecked = cardIndex == currentIndex,
                    size = cardSize
                ) { index, size ->
                    currentIndex = index
                    realCardSize.value = size
                }
            }
        }

Add Code block 7 under cardSizes.

Get Full Code At:
GitHub link

Animating Composables Made Easy

Isaac Akakpo — Fri, 04 Feb 2022 19:24:24 +0000

Animations in android hasn't always been straight forward to implement. The introduction of jetpack compose makes animations a bit more enjoyable and easier to implement.

In this article we'll be looking at the animateValueAsState api. Values currently supported are Color,Float,Dp,Rect,Int,Inoffset and Instize.

Let's take a look at animating color states for this series. We'll be creating something like this


// --> 1

val Purple = Color(0xFF6200EE)
val Orange = Color(0xFFFF5722)
val White =  Color(0xFFFFFFFF)
val Blue =  Color(0xFF4052B8)
val Green =  Color(0xFF4CAF50)
val Yellow =  Color(0xFFFFEB3B)



// --> 2
 var currentColor by remember {
        mutableStateOf(White)
    }

// --> 3
    val colors by remember {
        mutableStateOf(listOf(White, Orange, Purple200, Blue, Green,Yellow))
    }

val cardBackground by animateColorAsState(targetValue = currentColor)


    Box(modifier = Modifier.fillMaxSize()) {
        Card(
            modifier = Modifier
                .fillMaxWidth()
                .padding(10.dp)
                .height(200.dp),
            onClick = { 
                // --> 4
                currentColor = colors.random()
             },
            backgroundColor = cardBackground,
            elevation = 3.dp, indication = rememberRipple()
        ) {
            Box(modifier = Modifier.fillMaxSize()) {
                Text(text = "Click to Change Color", modifier = Modifier.align(Alignment.Center))
            }
        }

    }

We declare the colors we want to set the box as we click it.
Animate*AsState requires a target state that is mutable. NB : Animate*AsState in it self needs immutable
Make a list from all defined colors
Assign currentColor a new value on click

Happy Coding, See you in the next series !
Code Link