SDP-SSP-Compose-Multiplatform
Tags: android, ios, compose, composemultiplatform
Published: 2024-05-15 09:55:09

A scalable size unit for Compose Multiplatform for Android & iOS App

## Installation
Add the dependency to your build.gradle.kts file:

```
commonMain.dependencies {
    implementation("network.chaintech:sdp-ssp-compose-multiplatform:1.0.4")
}
```

## Usage

```
@Composable
fun App() = AppTheme {
    Box(
        modifier = Modifier
            .statusBarsPadding()
            .fillMaxSize()
            .background(Color.White),
        contentAlignment = Alignment.Center
    ) {
        Card(
            modifier = Modifier.fillMaxWidth(0.82f),
            shape = RoundedCornerShape(16.sdp),
            colors = CardDefaults.cardColors(Color(0xFFFBF3E8)),
        ) {
            Column(
                modifier = Modifier.fillMaxWidth(),
                horizontalAlignment = Alignment.CenterHorizontally,
            ) {
                Column(
                    modifier = Modifier
                        .fillMaxWidth()
                        .background(Color(0xFF585DDB))
                        .padding(vertical = 16.sdp),
                    horizontalAlignment = Alignment.CenterHorizontally,
                ) {
                    Image(
                        modifier = Modifier
                            .size(80.sdp),
                        painter = painterResource(Res.drawable.ic_user),
                        contentDescription = null,
                        contentScale = ContentScale.FillBounds
                    )

                    Text(
                        text = "Emily Dounger",
                        fontSize = 16.ssp,
                        color = Color.White,
                        fontWeight = FontWeight.Bold,
                        modifier = Modifier.padding(top = 12.sdp)
                    )
                }

                Text(
                    text = "Hi there \uD83D\uDC4B , We are Boards to share initital Goals and ideas.",
                    fontSize = 14.ssp,
                    textAlign = TextAlign.Center,
                    color = Color.Black,
                    lineHeight = 18.ssp,
                    fontWeight = FontWeight.Bold,
                    modifier = Modifier.padding(top = 30.sdp).padding(horizontal = 20.sdp)
                )

                Button(
                    onClick = {},
                    colors = ButtonDefaults.buttonColors(Color(0xFF007AFF)),
                    modifier = Modifier.padding(top = 24.sdp, bottom = 20.sdp)
                        .padding(horizontal = 20.sdp).fillMaxWidth().height(40.sdp)
                ) {
                    Text(text = "Say Hello", fontSize = 16.ssp)
                }
            }
        }
    }
}
```

## Android

- with using **dp**

![Android dp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8nx7z1biggjlp29tlv41.png)

- with using **sdp**

![Android sdp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nv5os5altabr5ks6mvz6.png)

## iOS

- with using **dp**

![iOS dp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x2m9ypii0wnwxr3zhvgq.png)

- with using **sdp**

![iOS sdp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f6ur9d1ud8fid17c8vr8.png)

## Desktop

- with using **sdp**

![Desktop sdp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u3cv3haz1y3e7qlijhzg.png)


> https://github.com/ChainTechNetwork/sdp-ssp-compose-multiplatform.git

Happy coding ❤

Connect with us 👇

- [Linkedin](https://www.linkedin.com/showcase/mobile-innovation-network)
- [GitHub](https://medium.com/r?url=https%3A%2F%2Fgithub.com%2FChainTechNetwork)