Create Common Edit Text-field in Jet-pack Compose

Question

I am new in jetpack compos. Can anyone tell me It's Right to Create Common Composeble Function? Common Function

@Composable
fun commonTextFiled(
    hint: String,
    icon: ImageVector,
    keyboardType: KeyboardType = KeyboardType.Text,
    imeAction: ImeAction = ImeAction.Done,
    trailingIcon: Boolean = false
): String {
    var textOfEditText by rememberSaveable { mutableStateOf("") }
    var toggleClick by rememberSaveable { mutableStateOf(false) }
    TextField(
        value = textOfEditText,
        onValueChange = { textOfEditText = it },
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 20.dp),
        keyboardOptions = KeyboardOptions(
            KeyboardCapitalization.Characters,
            autoCorrect = false,
            keyboardType = keyboardType, imeAction
        ),
        placeholder = { Text(text = hint) },
        visualTransformation = if (toggleClick) VisualTransformation.None else PasswordVisualTransformation()
        ,leadingIcon = { Icon(icon, contentDescription = null) },
        trailingIcon = {
            if (trailingIcon) {
                val image: Int = if (toggleClick) {
                    R.drawable.visibil
                } else {
                    R.drawable.visibility_off
                }

                IconButton(onClick = { toggleClick =!toggleClick }) {
                 Icon(painter = painterResource(id = image), contentDescription = null)
                }
            }
        },
        singleLine = true
    )
    return textOfEditText
}

Calling Common Functions --------------------

 var email by rememberSaveable { mutableStateOf("") }
 var password by rememberSaveable { mutableStateOf("") }

Spacer(modifier = modifier.padding(vertical = 10.dp))

                email = commonTextFiled(hint = "Enter Your Email", icon = Icons.Filled.Email)

                Spacer(modifier = modifier.padding(vertical = 10.dp))

                password = commonTextFiled("password", Icons.Filled.Lock, trailingIcon = true)

I am very confused about it is rigth or wrong way to create and call compose function like this. and thanks in advance.

If you are asking "can we create custom composable functions that represent reusable widgets that implement a particular design", the answer is "absolutely yes". Implementing a library of composables that implement your design system is commonplace and recommended. — CommonsWare, Jan 04 '23 at 13:31
Yeah, it's fine to create custom composables. However, it's discouraged for composable function to both emit UI *and* return value, as you do here. You should move `textOfEditText` one level up and pass it as `value` and `onValueChanged` to `CommonTextField`. See explanation and reasoning here: https://github.com/androidx/androidx/blob/androidx-main/compose/docs/compose-api-guidelines.md#emit-xor-return-a-value — Jan Bína, Jan 04 '23 at 13:41

score 1 · Accepted Answer · answered Jan 05 '23 at 13:21

Yes absolutely. You can create reusable composable functions.

The function doesn't return anything. Compose functions that emit UI do not need to return anything, because they describe the desired screen state instead of constructing UI widgets. For more info refer this.

You can pass callbacks to the composables instead of returning the string.

@Composable
fun CommonTextFiled(
    hint: String, text: String = "", onValueChange: (String) -> Unit
) {
    TextField(
        value = text,
        onValueChange = onValueChange,
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 20.dp),
        placeholder = { Text(text = hint) },
        singleLine = true
    )
}

@Composable
fun App() {
    var string by remember { mutableStateOf("") }
    CommonTextFiled(hint = "Enter Text", text = string) {
        string = it
    }
}

Create Common Edit Text-field in Jet-pack Compose

1 Answers1