Structure points opening keyboard

I am growing a typical chat display, with the textual content enter on the backside. The app has a backside bar with tabs and a topbar.

I am struggling at getting what I perceive to be the anticipated conduct (Android, iOS):

1. When keyboard is opened, textual content enter is (straight) on prime of keyboard.
2. The topbar does not transfer, i.e. stays at prime of display.
3. Backside bar is seen at backside of display when keyboard is closed.

I’ve tried totally different combos of utilizing scaffold’s innerPadding, making use of imePadding() to totally different parts, or not making use of it, and so forth. There’s at all times a unique subject that does not fulfill the three factors above. E.g. topbar is pushed out of display, there’s area with dimension of tabbar between enter and keyboard. Typically there are platform particular variations.

Are my expectations right? if sure, what’s mistaken with the code? if not, what to alter?

This is a repo with this code: https://github.com/ivnsch/textfieldpadding/tree/6717e4d247970316bcc36d52427de408514cff83

Difficulty instance when opening keyboard (present code):

Commenting imePadding(), area goes away, now topbar is pushed out:

bundle foo.bar.inputtestdemo

import androidx.compose.basis.background
import androidx.compose.basis.gestures.detectTapGestures
import androidx.compose.basis.format.Field
import androidx.compose.basis.format.Column
import androidx.compose.basis.format.fillMaxSize
import androidx.compose.basis.format.fillMaxWidth
import androidx.compose.basis.format.peak
import androidx.compose.basis.format.imePadding
import androidx.compose.basis.format.padding
import androidx.compose.basis.textual content.BasicTextField
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.NavigationBar
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Textual content
import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Colour
import androidx.compose.ui.enter.pointer.pointerInput
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.textual content.enter.TextFieldValue
import androidx.compose.ui.unit.dp
import org.jetbrains.compose.ui.tooling.preview.Preview

@OptIn(ExperimentalMaterial3Api::class)
@Composable
@Preview
enjoyable App() {
    Scaffold(
        topBar = {
            Column {
                TopAppBar(title = { Textual content("topbar") })
            }
        },
        bottomBar = { TabsBar() }
    ) { innerPadding ->

//      Field(modifier = Modifier.fillMaxSize()) {
        Field(modifier = Modifier.padding(innerPadding)) {
//      Field {
            Contents()
        }
    }
}

@Composable
non-public enjoyable Contents() {
    val focusManager = LocalFocusManager.present

    Field {
        Column(
            modifier = Modifier
                .imePadding()
                .fillMaxSize()
                .pointerInput(Unit) {
                    detectTapGestures(onTap = {
                        focusManager.clearFocus()
                    })
                },
        ) {
            Field(
                modifier = Modifier
                    .weight(1f)
                    .fillMaxWidth(),
                contentAlignment = Alignment.Heart
            ) {
                Textual content("Fundamental content material space")
            }

            BasicText()
        }
    }
}

@Composable
non-public enjoyable BasicText() {
    var textState by rememberSaveable(stateSaver = TextFieldValue.Saver) {
        mutableStateOf(TextFieldValue("..."))
    }

    BasicTextField(
        worth = textState,
        onValueChange = { textState = it },
        modifier = Modifier
            .peak(60.dp)
            .fillMaxWidth()
            .background(Colour.Yellow),
    )
}

@Composable
enjoyable TabsBar() {
    NavigationBar(
        modifier = Modifier.peak(100.dp),
        containerColor = Colour.Inexperienced,
    ) { }
}