Implement vertical scrolling for landscape orientation

app/src/main/java/com/example/cupcake/CupcakeScreen.kt

@@ -21,6 +21,8 @@ import androidx.annotation.StringRes
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material3.Icon
@@ -115,7 +117,10 @@ fun CupcakeApp(
         NavHost(
             navController = navController,
             startDestination = CupcakeScreen.Start.name,
-            modifier = Modifier.padding(innerPadding)
+            modifier = Modifier
+                .fillMaxSize()
+                .verticalScroll(rememberScrollState())
+                .padding(innerPadding)
         ) {
             composable(route = CupcakeScreen.Start.name) {
                 StartOrderScreen(

app/src/main/java/com/example/cupcake/ui/SelectOptionScreen.kt

@@ -39,6 +39,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import com.example.cupcake.R
 import com.example.cupcake.ui.components.FormattedPriceLabel
+import com.example.cupcake.ui.theme.CupcakeTheme
 
 /**
  * Composable that displays the list of items as [RadioButton] options,
@@ -54,7 +55,7 @@ fun SelectOptionScreen(
     onCancelButtonClicked: () -> Unit = {},
     onNextButtonClicked: () -> Unit = {},
     modifier: Modifier = Modifier
-){
+) {
     var selectedValue by rememberSaveable { mutableStateOf("") }
 
     Column(
@@ -72,7 +73,7 @@ fun SelectOptionScreen(
                         }
                     ),
                     verticalAlignment = Alignment.CenterVertically
-                ){
+                ) {
                     RadioButton(
                         selected = selectedValue == item,
                         onClick = {
@@ -100,12 +101,14 @@ fun SelectOptionScreen(
         Row(
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(dimensionResource(R.dimen.padding_medium))
+                .padding(dimensionResource(R.dimen.padding_medium)),
-                .weight(1f, false),
             horizontalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.padding_medium)),
             verticalAlignment = Alignment.Bottom
-        ){
+        ) {
-            OutlinedButton(modifier = Modifier.weight(1f), onClick = onCancelButtonClicked) {
+            OutlinedButton(
+                modifier = Modifier.weight(1f),
+                onClick = onCancelButtonClicked
+            ) {
                 Text(stringResource(R.string.cancel))
             }
             Button(
@@ -123,10 +126,12 @@ fun SelectOptionScreen(
 
 @Preview
 @Composable
-fun SelectOptionPreview(){
+fun SelectOptionPreview() {
-    SelectOptionScreen(
+    CupcakeTheme {
-        subtotal = "299.99",
+        SelectOptionScreen(
-        options = listOf("Option 1", "Option 2", "Option 3", "Option 4"),
+            subtotal = "299.99",
-        modifier = Modifier.fillMaxHeight()
+            options = listOf("Option 1", "Option 2", "Option 3", "Option 4"),
-    )
+            modifier = Modifier.fillMaxHeight()
+        )
+    }
 }

app/src/main/java/com/example/cupcake/ui/StartOrderScreen.kt

@@ -19,9 +19,7 @@ import androidx.annotation.StringRes
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -41,6 +39,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.example.cupcake.R
 import com.example.cupcake.data.DataSource
+import com.example.cupcake.ui.theme.CupcakeTheme
 
 /**
  * Composable that allows the user to select the desired cupcake quantity and expects
@@ -52,7 +51,7 @@ fun StartOrderScreen(
     quantityOptions: List<Pair<Int, Int>>,
     onNextButtonClicked: (Int) -> Unit,
     modifier: Modifier = Modifier
-){
+) {
     Column(
         modifier = modifier,
         verticalArrangement = Arrangement.SpaceBetween
@@ -75,20 +74,19 @@ fun StartOrderScreen(
             )
             Spacer(modifier = Modifier.height(dimensionResource(R.dimen.padding_small)))
         }
-        Row(modifier = Modifier.weight(1f, false)) {
+        Column(
-            Column(
+            modifier = Modifier.fillMaxWidth(),
-                modifier = Modifier.fillMaxWidth(),
+            horizontalAlignment = Alignment.CenterHorizontally,
-                horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = Arrangement.spacedBy(
-                verticalArrangement = Arrangement.spacedBy(
+                dimensionResource(id = R.dimen.padding_medium)
-                    dimensionResource(id = R.dimen.padding_medium)
+            )
+        ) {
+            quantityOptions.forEach { item ->
+                SelectQuantityButton(
+                    labelResourceId = item.first,
+                    onClick = { onNextButtonClicked(item.second) },
+                    modifier = Modifier.fillMaxWidth(),
                 )
-            ) {
-                quantityOptions.forEach { item ->
-                    SelectQuantityButton(
-                        labelResourceId = item.first,
-                        onClick = { onNextButtonClicked(item.second) }
-                    )
-                }
             }
         }
     }
@@ -103,7 +101,7 @@ fun SelectQuantityButton(
     @StringRes labelResourceId: Int,
     onClick: () -> Unit,
     modifier: Modifier = Modifier
-){
+) {
     Button(
         onClick = onClick,
         modifier = modifier.widthIn(min = 250.dp)
@@ -114,10 +112,14 @@ fun SelectQuantityButton(
 
 @Preview
 @Composable
-fun StartOrderPreview(){
+fun StartOrderPreview() {
-    StartOrderScreen(
+    CupcakeTheme {
-        quantityOptions = DataSource.quantityOptions,
+        StartOrderScreen(
-        onNextButtonClicked = {},
+            quantityOptions = DataSource.quantityOptions,
-        modifier = Modifier.fillMaxSize().padding(dimensionResource(R.dimen.padding_medium))
+            onNextButtonClicked = {},
-    )
+            modifier = Modifier
+                .fillMaxSize()
+                .padding(dimensionResource(R.dimen.padding_medium))
+        )
+    }
 }

app/src/main/java/com/example/cupcake/ui/SummaryScreen.kt

@@ -38,6 +38,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import com.example.cupcake.R
 import com.example.cupcake.data.OrderUiState
 import com.example.cupcake.ui.components.FormattedPriceLabel
+import com.example.cupcake.ui.theme.CupcakeTheme
 
 /**
  * This composable expects [orderUiState] that represents the order state, [onCancelButtonClicked]
@@ -50,7 +51,7 @@ fun OrderSummaryScreen(
     onCancelButtonClicked: () -> Unit,
     onSendButtonClicked: (String, String) -> Unit,
     modifier: Modifier = Modifier
-){
+) {
     val resources = LocalContext.current.resources
 
     val numberOfCupcakes = resources.getQuantityString(
@@ -97,9 +98,7 @@ fun OrderSummaryScreen(
             )
         }
         Row(
-            modifier = Modifier
+            modifier = Modifier.padding(dimensionResource(R.dimen.padding_medium))
-                .weight(1f, false)
-                .padding(dimensionResource(R.dimen.padding_medium))
         ) {
             Column(
                 verticalArrangement = Arrangement.spacedBy(dimensionResource(R.dimen.padding_small))
@@ -123,11 +122,13 @@ fun OrderSummaryScreen(
 
 @Preview
 @Composable
-fun OrderSummaryPreview(){
+fun OrderSummaryPreview() {
-    OrderSummaryScreen(
+    CupcakeTheme {
-        orderUiState = OrderUiState(0, "Test", "Test", "$300.00"),
+        OrderSummaryScreen(
-        onSendButtonClicked = { subject: String, summary: String -> },
+            orderUiState = OrderUiState(0, "Test", "Test", "$300.00"),
-        onCancelButtonClicked = {},
+            onSendButtonClicked = { subject: String, summary: String -> },
-        modifier = Modifier.fillMaxHeight()
+            onCancelButtonClicked = {},
-    )
+            modifier = Modifier.fillMaxHeight()
+        )
+    }
 }