Material3 ‐ Swipable Tab Rows - devrath/Material-3-Design-Kit GitHub Wiki

data class TabData(val title : String)

@Composable
fun TabContent() {

    val items = listOf(
        TabData(title = "Tab-1"),
        TabData(title = "Tab-2"),
        TabData(title = "Tab-3")
    )

    var selectedTabIndex by remember { mutableIntStateOf(0) }
    var pagerState = rememberPagerState { items.size }

    // This block will be triggered whenever our selected index is changed
    LaunchedEffect(selectedTabIndex) {
        pagerState.animateScrollToPage(selectedTabIndex)
    }

    LaunchedEffect(pagerState.currentPage,pagerState.isScrollInProgress) {
        // When the current page changes in pager  - update the selected Index Tab
        if(!pagerState.isScrollInProgress){
            selectedTabIndex = pagerState.currentPage
        }
    }

    Column( modifier = Modifier.fillMaxSize() ) {

        PrimaryTabRow(selectedTabIndex = selectedTabIndex) {
            items.forEachIndexed { index, tabData ->
                Tab(
                    // This tells that if the current tab is selected or not:-> Because we need to tell somehow the tab is selected( condition: selected tab is equal to current index that's looped)
                    selected = selectedTabIndex == index,
                    // On click update the selected index
                    onClick = { selectedTabIndex = index },
                    // Set the text composable
                    text = { Text(text = items[index].title) }
                )
            }
        }

        HorizontalPager(
            state = pagerState,
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f)
        ) { index ->

            Box(
                modifier = Modifier.fillMaxSize(),
                contentAlignment = Alignment.Center
            ) {

                Text(text = items[index].title)

            }

        }
    }
}