DEV Community

Cover image for SDP-SSP-Compose-Multiplatform
Mobile innovation Network
Mobile innovation Network

Posted on • Updated on

SDP-SSP-Compose-Multiplatform

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")
}

Enter fullscreen mode Exit fullscreen mode




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)
            }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

}

Enter fullscreen mode Exit fullscreen mode




Android

  • with using dp

Android dp

  • with using sdp

Android sdp

iOS

  • with using dp

iOS dp

  • with using sdp

iOS sdp

Desktop

  • with using sdp

Desktop sdp

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

Happy coding ❀

Connect with us πŸ‘‡

Top comments (0)