Finally got my project to compile!! now a nutty thing is happening with my stepper. On first render ...

# compose

[codeslubber]

Finally got my project to compile!! now a nutty thing is happening with my stepper. On first render things look fine:

but then when I click + I get this:

[codeslubber]

[codeslubber]

here is the code:

[codeslubber]

package com.example.surveys_android

import androidx.compose.*
import androidx.ui.core.Alignment
import androidx.ui.core.Text
import androidx.ui.foundation.shape.corner.RoundedCornerShape
import androidx.ui.layout.*
import androidx.ui.material.Button
import androidx.ui.material.MaterialTheme
import androidx.ui.material.surface.Card
import androidx.ui.tooling.preview.Preview
import androidx.ui.unit.dp

@Composable
fun MeasureQuestionView() {
    val typography = (MaterialTheme.typography())

    val rangeOfValues = 115..125
    val currentValue = state {rangeOfValues.first}

    Card(shape = RoundedCornerShape(8.dp)) {
        Column(modifier = LayoutPadding(16.dp)) {
            Text("What was your blood sugar reading?", style = typography.h6)
            numberStepper(currentValue, rangeOfValues, "mg/dL")
        }
    }

}

@Composable
fun numberStepper(currentValue: MutableState<Int>, range: IntRange, units: String) {
    val typography = (MaterialTheme.typography())

    Container(height = 75.dp) {
        Row(LayoutPadding(20.dp)) {
            Button(text = "-", onClick = {
                if (currentValue.value > range.first) currentValue.value -= 1
            })
            Spacer(LayoutWidth(10.dp))
            Text(currentValue.value.toString(), style = typography.h5)
            Spacer(LayoutWidth(10.dp))
            Button(text = "+", onClick = {
                if (currentValue.value < range.last) currentValue.value += 1
            })
            Spacer(LayoutWidth(10.dp))
            Align(Alignment.CenterLeft){
                Text(units)
            }
        }
    }

}

@Preview
@Composable
fun PreviewMeasureViews() {
    MeasureQuestionView()
}

[Zach Klippenstein (he/him) [MOD]]

I think it would be more idiomatic for numberStepper to take in an Int for the current value, and an event handler for when that value is changed. It also looks odd to me to pass in currentState though since you’re not actually using it outside numberStepper at all.

But since MutableState is an @Model, i don’t know why this wouldn’t work. If you switch to just passing in a value and an event handler, does that fix it?

[codeslubber]

Yeah I didn’t like this approach, but it was an example of a stepper in Compose (the only one I could find). It worked fine in 03. But the problem is the render is hosed. Are you thinking it’s confused and thinks there are 2 states?

[Ryan Mentley]

I copy+pasted your code as a test and it worked just fine for me, again at HEAD rather than dev04 specifically

[codeslubber]

so what do you suggest?

[codeslubber]

should I show you my gradle files?

[codeslubber]

I tried several variants on the state var

[codeslubber]

Damn nevermind this is fixed, just wrapped the text in a Container.