0

I'm building a custom BasicTextField using OutlinedTextFieldDecorationBox that is intended to be a Numeric field with units of measurement after the input value. "100 ft" or "3.5 kg" etc.

Additionally, I want it to be relatively compact, so I reduced default padding values using the following approach:

 BasicTextField(
       ...
    ) {
        TextFieldDefaults.OutlinedTextFieldDecorationBox(
            ...
            trailingIcon = trailingIconParameter, //This trailing icon is the problem
            ...
            contentPadding = TextFieldDefaults.outlinedTextFieldPadding(
                start = 7.dp, end = 7.dp, top = 4.dp, bottom = 4.dp //Changing default padding values
            ),
            ...
        )
    }

I pass trailingIconParameter as a parameter of the type @Composable ()->Unit, using {Text("ft")}. Now, it seems like trailingIcon doesn't count as "content" padding. It applies default padding values to it, which ruins the design. Even providing {} as a parameter applies those values, it is not something intrinsic to Text().

I have tried changing the size of Text() and setting all content padding values to 0.dp, but it only affected the value of the field, not the trailing icon. I couldn't find a parameter that is responsible for those values.

example of the result of adding a trailing icon

As can be seen, the textfield value and label are pushed to the side by the horizontal padding of a trailing icon.

Luoencz
  • 21
  • 3

0 Answers0