TextInputDialog.md

TextInputDialog

TextInputDialog is well, a dialog built using the TextInputLayout (TIL) for the purpose of simple text input.

TextInputDialogDemo.mp4

You can use it in 3 simple steps :

Step 1 - Define state

Either inside a Composable :

val textInputDialogState = rememberTextInputDialogState()

or inside a ViewModel :

val textInputDialogState = textInputDialogState()

Step 2 - Invoke Composable

TextInputDialog(state = textInputDialogState)

Step 3 - Show dialog

You can show the dialog whenever you want just by mutating the state defined in Step#1. TextInputDialogState is a sealed class with two possible values - Hidden (initialization value) & Visible. Update the state to Visible to display the dialog :

class Visible(
    val title: String,
    val input: MutableState<TextInputState>,
    val submitButtonLabel: String = "Submit",
    val submit: (String) -> Unit
): TextInputDialogState()

For example, below statement mutates the state in order to display the dialog for inputting birth year of the user.

textInputDialogState.value = TextInputDialogState.Visible(
    title = "Enter your birth year",
    input = mutableStateOf(
        TextInputState(
            label = "Year",
            inputConfig = InputConfig.fixedLengthNumber(4)
        )
    ),
    submit = { input ->
        val birthYear = input.toInt() // No need to worry about error; already handled by TIL
        val age = Calendar.getInstance().get(YEAR) - birthYear
        showMessageDialog("Age", "Your age is $age years.")
    }
)

Worth Noting :

• Because TextInputDialog uses TextInputLayout (TIL), all of TIL's validations are as-is applicable here too.

• If your use case requires showing different TextInputDialogs, you don't have to define multiple states. A single state is reusable across all triggers.