【Android】Jetpack Compose の TextField にエラーメッセージとアイコンを表示する

完成形

TextFieldに何も入力されていないときと、全角／半角スペースのみが入力されているときに、エラーメッセージ／アイコンを表示します。

実装例

app/build.gradle

dependencies {
    // 追加 : エラーアイコンで必要
    def compose_version = '1.1.0-beta01'
    implementation "androidx.compose.material:material-icons-extended:$compose_version"
}

TextFieldErrorScreen.kt

@Composable
fun TextFieldErrorScreen() {
    var isError by remember { mutableStateOf(false) }
    var text by remember { mutableStateOf("") }

    Scaffold(
        modifier = Modifier.fillMaxSize(),
        topBar = { TextFieldErrorTopAppBar() }
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(20.dp),
            verticalArrangement = Arrangement.Center
        ) {
            TextField(
                modifier = Modifier.fillMaxWidth(),
                isError = isError,
                value = text,
                onValueChange = {
                    isError = it.isBlank()
                    text = it
                },
                trailingIcon = {
                    if (!isError) return@TextField
                    Icon(Icons.Filled.Error, "error", tint = MaterialTheme.colors.error)
                }
            )
            if (isError) {
                Text(
                    text = "何かしら入力してねん",
                    color = MaterialTheme.colors.error
                )
            }
        }
    }
}

@Composable
private fun TextFieldErrorTopAppBar() {
    TopAppBar(
        title = { Text(text = "TextFieldErrorSample") }
    )
}