How to make divider line fill width in ScrollableTabRow with two tabs

Question

How to make divider line fill width in ScrollableTabRow with two tabs in compose I made Modifier.fillMaxWidth() for ScrollableTabRow but it didn't help It shows only two tabs as wrapContent

Here is my code

ScrollableTabRow(
        modifier = Modifier.fillMaxWidth(),
        backgroundColor = Color.White,
        selectedTabIndex = tabIndex,
        edgePadding = 32.5.dp,
    ) {
        tranchesTabs.forEachIndexed { index, title ->
            Tab(
                modifier = Modifier.fillMaxWidth(),
                
                onClick = {
                    coroutineScope.launch {
                        pagerState.scrollToPage(index)
                    }
                }, text = {
                    Text(text = title)
                })
        }
    }

Answer 1

This code works for me:

Column 
{
       ScrollableTabRow(
        modifier = Modifier.fillMaxWidth(),
        backgroundColor = Color.White,
        selectedTabIndex = tabIndex,
        edgePadding = 32.5.dp,
    ) {
        tranchesTabs.forEachIndexed { index, title ->
            Tab(
                modifier = Modifier.fillMaxWidth(),
                
                onClick = {
                    coroutineScope.launch {
                        pagerState.scrollToPage(index)
                    }
                }, text = {
                    Text(text = title)
                })
        }
    }
        Divider(
            color = Gray50,
            modifier = Modifier
                .fillMaxWidth()
                .padding(vertical = 4.dp)
        )
  }

Answer 2

• Well, this isn't still fixed officially, but you can pass an empty lambda {} in ScrollableTabRow for the divider parameter and use Column for adding both ScrollableTabRow and Divider:

val strList = listOf("1", "2")
val pagerState = rememberPagerState()
    Column() {
        ScrollableTabRow(
            divider = {} /* pass an empty lambda here */,
            modifier = Modifier
                .fillMaxWidth(), selectedTabIndex = pagerState.currentPage
        ) {
            strList.forEachIndexed { index, s ->
                Tab(selected = pagerState.currentPage == index, onClick = {}) {
                    Text(
                        text = s,
                        style = MaterialTheme.typography.titleLarge,
                        fontSize = 18.sp,
                        modifier = Modifier.padding(15.dp),
                        color = if (pagerState.currentPage == index) TabRowDefaults.contentColor else MaterialTheme.colorScheme.onSurface.copy(
                            0.70f
                        )
                    )
                }
            }
        }
        Divider(thickness = 1.dp, modifier = Modifier.fillMaxWidth()) // add divider here
        HorizontalPager(
            key = {
                it
            },
            modifier = Modifier.fillMaxWidth(),
            count = strList.size, state = pagerState
        ) {
            Box(modifier = Modifier.fillMaxSize().background(MaterialTheme.colorScheme.surface), contentAlignment = Alignment.Center) {
                Text(text = it.toString())
            }
        }
    }

And it should fix it: preview of the above code