From cbe659ebc75dc05d9daa5cfbb1258c9ff47dc09a Mon Sep 17 00:00:00 2001 From: Aslan Date: Fri, 17 May 2024 21:09:39 +0300 Subject: [PATCH] feat: add window size class to more responsive home screen --- composeApp/build.gradle.kts | 1 + .../spiritvisor/cocktail/CocktailScreen.kt | 7 ------- .../spiritvisor/cocktail/component/CreditText.kt | 2 +- .../com/aslansari/spiritvisor/home/HomeScreen.kt | 16 ++++++++++++++-- gradle/libs.versions.toml | 2 ++ 5 files changed, 18 insertions(+), 10 deletions(-) diff --git a/composeApp/build.gradle.kts b/composeApp/build.gradle.kts index 2e0fb03..bd8f127 100644 --- a/composeApp/build.gradle.kts +++ b/composeApp/build.gradle.kts @@ -104,6 +104,7 @@ kotlin { implementation(libs.coil.compose) implementation(libs.coil.mp) implementation(libs.coil.network.ktor) + implementation(libs.windowsize.multiplatform) } desktopMain.dependencies { implementation(compose.desktop.currentOs) diff --git a/composeApp/src/commonMain/kotlin/com/aslansari/spiritvisor/cocktail/CocktailScreen.kt b/composeApp/src/commonMain/kotlin/com/aslansari/spiritvisor/cocktail/CocktailScreen.kt index 736a60e..16ad482 100644 --- a/composeApp/src/commonMain/kotlin/com/aslansari/spiritvisor/cocktail/CocktailScreen.kt +++ b/composeApp/src/commonMain/kotlin/com/aslansari/spiritvisor/cocktail/CocktailScreen.kt @@ -2,25 +2,18 @@ package com.aslansari.spiritvisor.cocktail -import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.CircleShape import androidx.compose.material.* import androidx.compose.material.icons.Icons -import androidx.compose.material.icons.filled.Close -import androidx.compose.material.icons.filled.Done import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.draw.clip import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.StrokeCap -import androidx.compose.ui.graphics.vector.rememberVectorPainter import androidx.compose.ui.layout.ContentScale import androidx.compose.ui.unit.dp import androidx.lifecycle.viewmodel.compose.viewModel -import coil3.compose.AsyncImage -import coil3.compose.AsyncImagePainter import coil3.compose.SubcomposeAsyncImage import coil3.compose.SubcomposeAsyncImageContent import com.aslansari.spiritvisor.cocktail.component.CreditText diff --git a/composeApp/src/commonMain/kotlin/com/aslansari/spiritvisor/cocktail/component/CreditText.kt b/composeApp/src/commonMain/kotlin/com/aslansari/spiritvisor/cocktail/component/CreditText.kt index dd837f1..617e236 100644 --- a/composeApp/src/commonMain/kotlin/com/aslansari/spiritvisor/cocktail/component/CreditText.kt +++ b/composeApp/src/commonMain/kotlin/com/aslansari/spiritvisor/cocktail/component/CreditText.kt @@ -31,7 +31,7 @@ fun CreditText(modifier: Modifier = Modifier) { } append(" with") } - Text(creditText, style = MaterialTheme.typography.caption.copy(color = Color(0xFF697077))) + Text(creditText, style = MaterialTheme.typography.body2.copy(color = Color(0xFF697077))) Spacer(Modifier.size(2.dp)) Icon( imageVector = Icons.HeartSharp, diff --git a/composeApp/src/commonMain/kotlin/com/aslansari/spiritvisor/home/HomeScreen.kt b/composeApp/src/commonMain/kotlin/com/aslansari/spiritvisor/home/HomeScreen.kt index 80656bd..7a8460c 100644 --- a/composeApp/src/commonMain/kotlin/com/aslansari/spiritvisor/home/HomeScreen.kt +++ b/composeApp/src/commonMain/kotlin/com/aslansari/spiritvisor/home/HomeScreen.kt @@ -1,3 +1,5 @@ +@file:OptIn(ExperimentalMaterial3WindowSizeClassApi::class) + package com.aslansari.spiritvisor.home import androidx.compose.foundation.layout.* @@ -5,6 +7,9 @@ import androidx.compose.material.Button import androidx.compose.material.CircularProgressIndicator import androidx.compose.material.MaterialTheme import androidx.compose.material.Text +import androidx.compose.material3.windowsizeclass.ExperimentalMaterial3WindowSizeClassApi +import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass +import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass import androidx.compose.runtime.Composable import androidx.compose.runtime.collectAsState import androidx.compose.runtime.getValue @@ -44,6 +49,7 @@ internal fun HomeScreen( } } } + val windowSizeClass = calculateWindowSizeClass() Box(modifier = modifier.fillMaxSize()) { Column( modifier = Modifier.fillMaxSize(), @@ -53,7 +59,13 @@ internal fun HomeScreen( Text("Pick a flavor for your cocktail ...", style = MaterialTheme.typography.h4) Spacer(Modifier.size(32.dp)) FlowRow( - modifier = Modifier.fillMaxWidth(.5f), + modifier = Modifier.padding(16.dp).then( + if (windowSizeClass.widthSizeClass == WindowWidthSizeClass.Expanded) { + Modifier.fillMaxWidth(.5f) + } else { + Modifier.fillMaxWidth() + } + ), horizontalArrangement = Arrangement.spacedBy(32.dp), verticalArrangement = Arrangement.spacedBy(16.dp), maxItemsInEachRow = 3, @@ -74,6 +86,6 @@ private fun RowScope.FlavorCategoryButton( modifier: Modifier = Modifier, ) { Button(modifier = modifier.weight(1f), onClick = onClick) { - Text(text) + Text(text, style = MaterialTheme.typography.h6) } } diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index 1b58652..44daa13 100644 --- a/gradle/libs.versions.toml +++ b/gradle/libs.versions.toml @@ -23,6 +23,7 @@ logback = "1.5.6" kotlinx-datetime = "0.6.0-RC.2" kotlinx-serialization-json = "1.6.2" coroutines = "1.8.1" +windowsize-multiplatform = "0.5.0" [libraries] kotlin-test = { module = "org.jetbrains.kotlin:kotlin-test", version.ref = "kotlin" } @@ -57,6 +58,7 @@ coil-compose = { module = "io.coil-kt.coil3:coil-compose", version.ref = "coil3" coil-compose-core = { module = "io.coil-kt.coil3:coil-compose-core", version.ref = "coil3" } coil-network-ktor = { module = "io.coil-kt.coil3:coil-network-ktor", version.ref = "coil3" } coil-mp = { module = "io.coil-kt.coil3:coil", version.ref = "coil3" } +windowsize-multiplatform = { module = "dev.chrisbanes.material3:material3-window-size-class-multiplatform", version.ref = "windowsize-multiplatform" } [plugins] androidApplication = { id = "com.android.application", version.ref = "agp" }