Migrate to flexbox from Flow layouts

Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Filters.kt

@@ -17,13 +17,12 @@
 @file:OptIn(
     ExperimentalSharedTransitionApi::class,
     ExperimentalFoundationStyleApi::class,
-    ExperimentalMediaQueryApi::class
+    ExperimentalMediaQueryApi::class,
 )
 
 package com.example.jetsnack.ui.components
 
 import android.content.res.Configuration
-import androidx.compose.ui.ExperimentalMediaQueryApi
 import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.ExperimentalSharedTransitionApi
 import androidx.compose.animation.SharedTransitionScope
@@ -51,6 +50,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalMediaQueryApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.UiMediaScope
 import androidx.compose.ui.geometry.Offset

Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Snacks.kt

@@ -159,6 +159,7 @@ fun SnackCollection(snackCollection: SnackCollection, onSnackClick: (Long, Strin
                             snackTextStyle = normalTextStyle,
                             imageAspectRatio = 4f / 3f,
                         )
+
                     CollectionType.Highlight ->
                         SnackItem(
                             snackCollectionId = snackCollection.id,
@@ -167,6 +168,7 @@ fun SnackCollection(snackCollection: SnackCollection, onSnackClick: (Long, Strin
                             showAddButton = true,
                             style = JetsnackTheme.styles.highlightGlowCardStyle,
                         )
+
                     CollectionType.Card ->
                         SnackItem(
                             snackCollectionId = snackCollection.id,

Jetsnack/app/src/main/java/com/example/jetsnack/ui/home/FilterScreen.kt

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-@file:OptIn(ExperimentalLayoutApi::class, ExperimentalSharedTransitionApi::class, ExperimentalMaterial3Api::class)
+@file:OptIn(ExperimentalFlexBoxApi::class, ExperimentalSharedTransitionApi::class, ExperimentalMaterial3Api::class)
 
 package com.example.jetsnack.ui.home
 
@@ -30,8 +30,9 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.ExperimentalLayoutApi
-import androidx.compose.foundation.layout.FlowRow
+import androidx.compose.foundation.layout.ExperimentalFlexBoxApi
+import androidx.compose.foundation.layout.FlexBox
+import androidx.compose.foundation.layout.FlexWrap
 import androidx.compose.foundation.layout.IntrinsicSize
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -210,15 +211,15 @@ fun FilterScreen(sharedTransitionScope: SharedTransitionScope, animatedVisibilit
     }
 }
 
-@OptIn(ExperimentalLayoutApi::class)
 @Composable
 fun FilterChipSection(title: String, filters: List<Filter>) {
     FilterTitle(text = title)
-    FlowRow(
+    FlexBox(
         modifier = Modifier
             .fillMaxWidth()
             .padding(top = 12.dp, bottom = 16.dp)
             .padding(horizontal = 4.dp),
+        config = { wrap(FlexWrap.Wrap) },
     ) {
         filters.forEach { filter ->
             FilterChip(
@@ -257,7 +258,7 @@ fun SortFilters(sortFilters: List<Filter> = SnackRepo.getSortFilters(), sortStat
 
 @Composable
 fun MaxCalories(sliderPosition: Float, onValueChanged: (Float) -> Unit) {
-    FlowRow {
+    FlexBox(config = { wrap(FlexWrap.Wrap) }) {
         FilterTitle(text = stringResource(id = R.string.max_calories))
         Text(
             text = stringResource(id = R.string.per_serving),

Jetsnack/app/src/main/java/com/example/jetsnack/ui/home/cart/Cart.kt

@@ -27,6 +27,7 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -97,7 +98,6 @@ import com.example.jetsnack.ui.utils.UiMediaScopeWrapper
 import com.example.jetsnack.ui.utils.formatPrice
 import kotlin.math.abs
 import kotlin.math.roundToInt
-import androidx.compose.foundation.layout.BoxWithConstraints
 
 @Composable
 fun Cart(
@@ -245,7 +245,7 @@ private fun SwipeDismissItemBackground(swipeDismissState: SwipeToDismissBoxState
                 if (constraints.maxWidth > 0) {
                     val offset = try {
                         swipeDismissState.requireOffset()
-                    } catch ( _ : IllegalStateException) {
+                    } catch (_: IllegalStateException) {
                         0f
                     }
                     (abs(offset) / constraints.maxWidth).coerceIn(0f, 1f)

Jetsnack/app/src/main/java/com/example/jetsnack/ui/theme/Styles.kt

@@ -43,14 +43,14 @@ import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.RectangleShape
 import androidx.compose.ui.graphics.TileMode
-import com.example.jetsnack.ui.utils.ellipticalGradient
 import androidx.compose.ui.graphics.shadow.Shadow
 import androidx.compose.ui.mediaQuery
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.DpOffset
 import androidx.compose.ui.unit.TextUnit
 import androidx.compose.ui.unit.dp
 import com.example.jetsnack.ui.components.textStyleWithFontFamilyFix
+import com.example.jetsnack.ui.utils.ellipticalGradient
 
 @Immutable
 data class Styles(
@@ -69,7 +69,7 @@ data class Styles(
         minWidth(58.dp)
         if (mediaQuery {
                 pointerPrecision == UiMediaScope.PointerPrecision.Fine &&
-                        keyboardKind == UiMediaScope.KeyboardKind.Physical
+                    keyboardKind == UiMediaScope.KeyboardKind.Physical
             }
         ) {
             contentPaddingVertical(4.dp)
@@ -216,7 +216,7 @@ data class Styles(
         contentColor(colors.textSecondary)
         clip(true)
     },
-    val baseSnackCardStyle : Style = Style {
+    val baseSnackCardStyle: Style = Style {
         textAlign(TextAlign.Center)
 
         // todo this animation doesn't seem to play nice
@@ -245,7 +245,7 @@ data class Styles(
             }
         }
     },
-    val highlightGlowCardStyle : Style = baseSnackCardStyle then Style {
+    val highlightGlowCardStyle: Style = baseSnackCardStyle then Style {
         background(colors.brandLight)
         border(0.dp, colors.brandLight)
         hovered {
@@ -261,7 +261,7 @@ data class Styles(
             }
         }
     },
-    val normalCardStyle : Style = baseSnackCardStyle then Style {
+    val normalCardStyle: Style = baseSnackCardStyle then Style {
         background(Color.Transparent)
         width(100.dp)
         contentPadding(2.dp)
@@ -270,11 +270,11 @@ data class Styles(
             background(colors.uiFloated.copy(alpha = 0.5f))
         }
     },
-    val plainCardStyle : Style = baseSnackCardStyle then Style {
+    val plainCardStyle: Style = baseSnackCardStyle then Style {
         background(colors.cardHighlightBackground)
         clip(true)
         border(1.dp, colors.cardHighlightBorder)
-    }
+    },
 )
 
 fun StyleScope.adaptiveFontSize(fontSize: TextUnit) {
@@ -286,9 +286,13 @@ fun StyleScope.adaptiveFontSize(fontSize: TextUnit) {
     }
     scaleFactor = when (LocalUiMediaScope.currentValue.pointerPrecision) {
         UiMediaScope.PointerPrecision.Coarse -> scaleFactor * 1f
+
         UiMediaScope.PointerPrecision.Blunt -> scaleFactor * 0.66f
+
         UiMediaScope.PointerPrecision.Fine -> scaleFactor * 1f
+
         UiMediaScope.PointerPrecision.None -> scaleFactor
+
         else -> {
             scaleFactor
         }

Jetsnack/app/src/main/java/com/example/jetsnack/ui/utils/EllipticalGradient.kt

@@ -1,3 +1,19 @@
+/*
+ * Copyright 2026 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
 package com.example.jetsnack.ui.utils
 
 import androidx.compose.ui.geometry.Offset
@@ -50,4 +66,4 @@ fun Brush.Companion.ellipticalGradient(
             tileMode = tileMode,
         )
     }
-}
+}