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.