Hi ! Is there a way to get available size somewhere in the Composable tree ? (See the comment) Becau...

# compose

[loloof64]

Hi ! Is there a way to get available size somewhere in the Composable tree ? (See the comment)
Because in a Composable I made, I could not rely on a Modifier, I really needed to get the size as a parameter.

@Composable
fun GameScreen(topLevelNavController: NavController) {
    GameScreenTheme {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = {
                        Text(
                            stringResource(id = R.string.game_page),
                        )
                    },
                    navigationIcon = {
                        IconButton(onClick = {
                            topLevelNavController.popBackStack()
                        }) {
                            Icon(Icons.Filled.ArrowBack)
                        }
                    }
                )
            },
        ) {
            // Is there a way to get available width and height ?
        }
    }
}

[Bradleycorn]

for the whole screen, or just the width and height of the composable?

[Adam Powell]

There are a few ways to go about this depending on use case. What would you like to do with this information?

[Adam Powell]

More specifically, the WithConstraints composable defers composition of its contents until layout time when the sizing constraints are available, and you can compose different UI depending on the size. This is a bit expensive, but it's often the right way to do certain kinds of responsive UIs.

[loloof64]

@Bradleycorn Just for the nested composable, where I put the comment 😃

[loloof64]

@Adam Powell In fact I would like to give the same size to both width and height. But i want it to be the minimum of the available size.

[loloof64]

I'll try WithConstraints. In fact, I just need to compute it on device rotation.

[Adam Powell]

you want to give the same size to both width and height? You might be looking for Modifier.aspectRatio(1f) then

[Adam Powell]

WithConstraints is way overkill for that 🙂

[loloof64]

Thank you. So I'll try with aspectRatio of 1. and fill size 😃

[Adam Powell]

try just the aspectRatio first

[loloof64]

ok

[loloof64]

It does not work. I think because I must set a size to my Composable manually (I could not do other way) :

{
            Column(
                modifier = Modifier.fillMaxSize().aspectRatio(1f)
            ) {
                StaticChessBoard(size = 300.dp)
            }

        }

[loloof64]

The StaticChessBoard had to be, for technical reasons, to be given a size manually. Because I had to compute the font size based on the board size.

[loloof64]

I managed using `WithConstraints`:

[loloof64]

Column(
                modifier = Modifier.fillMaxSize().aspectRatio(1f)
            ) {
                WithConstraints {
                    val availableWidth = with(DensityAmbient.current) {constraints.maxWidth.toDp()}
                    val availableHeight = with(DensityAmbient.current) {constraints.maxHeight.toDp()}
                    
                    val minSize = if (availableWidth < availableHeight) availableWidth else availableHeight
                    
                    StaticChessBoard(size = minSize)
                }
            }

[Andrey Kulikov]

you can also just use properties like maxWidth from the WithConstraintsScope instead of calculating availableWidth/availableHeight manually

[Adam Powell]

that, and I would probably push the use of WithConstraints down into the part of your code where you need to do font sizing rather than forcing StaticChessBoard to accept a size as a parameter

[Adam Powell]

which would then let you use the standard Modifier.aspectRatio for calling StaticChessBoard

[loloof64]

Yes, you're right. I'm gonna use WithConstraints only for the font computation directly inside the ChessBoard.

[Adam Powell]

Try to avoid using more than one WithConstraints if you can

[loloof64]

Yes, I'll restrict its usage at maximum 😃