0

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 enter image description here

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)
                })
        }
    }
Azizjon
  • 61
  • 4

1 Answers1

0

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)
        )
  }
Tomerikoo
  • 18,379
  • 16
  • 47
  • 61
Gowtham
  • 41
  • 3