ML Composer - Ep.1 - Text Recognition composable

MainActivity.kt

@androidx.compose.ui.tooling.preview.Preview
    @Composable
    private fun BindTextRecognitionOutput() {
        ConstraintLayout(Modifier.fillMaxSize()) {
            val (title, text, backToCameraButton) = createRefs()
            val textValue by textRecognitionViewModel.getOutput().observeAsState()
            val scrollState = rememberScrollState(0)

            Text(
                modifier = Modifier
                    .constrainAs(title) {
                        top.linkTo(parent.top)
                        linkTo(start = parent.start, end = parent.end)
                        width = Dimension.wrapContent
                        height = Dimension.wrapContent
                    }
                    .then(Modifier.padding(16.dp)),
                text = "TEXT RECOGNITION RESULT",
                style = TextStyle(fontStyle = FontStyle.Italic),
                fontWeight = FontWeight.Bold
            )

            SelectionContainer(modifier = Modifier
                .constrainAs(text) {
                    linkTo(top = title.bottom, bottom = backToCameraButton.top, 16.dp, 16.dp)
                    linkTo(start = parent.start, end = parent.end)
                    width = Dimension.fillToConstraints
                    height = Dimension.fillToConstraints
                }
                .then(
                    Modifier.padding(16.dp)
                )
                .then(
                    Modifier.border(
                        width = 4.dp,
                        color = Color.Black,
                        shape = RectangleShape
                    )
                )) {
                Text(
                    text = textValue ?: "",
                    modifier = Modifier
                        .verticalScroll(scrollState)
                        .then(Modifier.padding(8.dp))
                )
            }

            Button(modifier = Modifier.constrainAs(backToCameraButton) {
                linkTo(start = parent.start, end = parent.end)
                bottom.linkTo(parent.bottom, 16.dp)
                width = Dimension.preferredWrapContent
                height = Dimension.preferredWrapContent
            }, onClick = {
                navController.popBackStack()
            })
            {
                Text("CAMERA")
            }
        }
    }