I am trying to change the type of Floating Action Button based on the swipe up and down gesture. But the gesture is only been detected on the edge of the screen and not inside the scaffold. I want to detect swipe up and down gesture in the content area of the scaffold.

This is code I tried ->

import android.util.Log
import androidx.compose.animation.core.Animatable
import androidx.compose.animation.core.AnimationSpec
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.detectVerticalDragGestures
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.systemBars
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Create
import androidx.compose.material.icons.filled.Email
import androidx.compose.material.icons.filled.MailOutline
import androidx.compose.material3.DrawerValue
import androidx.compose.material3.ExtendedFloatingActionButton
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.ModalDrawerSheet
import androidx.compose.material3.ModalNavigationDrawer
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.rememberDrawerState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.rememberVectorPainter
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.unit.dp
import kotlinx.coroutines.launch

@Composable
fun MailScreen() {
    val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    val example = listOf("1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1","1",)

    //Track if FAB is extended
    var isExtended by remember {
        mutableStateOf(false)
    }

    Box (
        modifier = Modifier
            .fillMaxSize()
            .pointerInput(Unit) {
                detectVerticalDragGestures { _, dragAmount ->
                    //Detect swipe up or down
                    if (dragAmount < 0) {
                        //Swiped Up
                        isExtended = true
                    } else if (dragAmount > 0) {
                        // Swiped down
                        isExtended = false
                    }
                }
            }
    ) {

        ModalNavigationDrawer(
            drawerState = drawerState, // Use ModalDrawer's state
            drawerContent = {
                DrawerItemUiLayout() // Drawer content
            },
            gesturesEnabled = true, // Allow gestures to open/close the drawer
            scrimColor = Color.Black.copy(alpha = 0.32f) // Scrim with dimming effect
        ) {

            Scaffold(
                modifier = Modifier.windowInsetsPadding(WindowInsets.systemBars),
                topBar = {
                    TopBarOne(
                        openDrawer = {
                            scope.launch {
                                drawerState.open() // Open drawer with built-in animation
                            }
                        }
                    )
                },
                floatingActionButton = {
                    if (isExtended) {
                        Log.d("FAB","value is : $isExtended")
                        ExtendedFloatingActionButton(
                            onClick = { /*TODO*/ },
                            modifier = Modifier.background(Color.Cyan)
                        ) {
                            Icon(imageVector = Icons.Default.Create, contentDescription = null)
                            Text(text = "Compose")
                        }
                    } else {
                        Log.d("FAB","value is : $isExtended")
                        
                        FloatingActionButton(onClick = { /*TODO*/ }) {
                            Icon(imageVector = Icons.Default.Create, contentDescription = null)
                        }
                    }
                }
            ) { innerPadding ->
                LazyColumn(
                    modifier = Modifier
                        .fillMaxSize()
                        .padding(innerPadding)
                ) {
                    // Main content here
                    items(example) { item: String ->
                        Text(text = item)
                    }
                }
            }

        }
    }
}

I have tried using chatGpt tll but it is giving these all solutions like
Ensure Full Coverage: The pointerInput modifier is applied to the Scaffold to ensure that it covers the entire screen.

Test on a Real Device: Swipe gestures can sometimes behave differently in the emulator versus a real device. Ensure to test on a real device or emulator for accurate behavior.

Check for Interference: Ensure no other composables or overlays are intercepting touch events. The Scaffold with pointerInput should be the top-level composable in the screen content area.

But I tried to see them and they are not working. Please help me to solve the problem.