Modifier in @Compose functions in Android Studio Kotlin Programming Language

Question

What is difference between modifier (small m) and Modifier (capital M) when it is used in the @Compose Functions in Android Studio?

I am receiving the following output enter image description here by using the following code

`@Composable
fun ComposeQuadrant(){
    Column (
        Modifier.fillMaxWidth()
    ){
        Row (Modifier.weight(1f)){
            DisplayTheText(
                name = stringResource(R.string.text_composable),
                define = stringResource(R.string.text_composable_define),
                color = colorResource(R.color.color_1),
                modifier = Modifier.weight(1f)
            )
            DisplayTheText(
                name = stringResource(R.string.image_composable),
                define = stringResource(R.string.image_composable_define),
                color = colorResource(R.color.color_2),
                modifier = Modifier.weight(1f)
            )
        }
        Row (Modifier.weight(1f)){
            DisplayTheText(
                name = stringResource(R.string.row_composable),
                define = stringResource(R.string.row_composable_define),
                color = colorResource(R.color.color_3),
                modifier = Modifier.weight(1f)
            )
            DisplayTheText(
                name = stringResource(R.string.column_composable),
                define = stringResource(R.string.column_composable_define),
                color = colorResource(R.color.color_4),
                modifier = Modifier.weight(1f)
            )
        }
    }
}

@Composable
fun DisplayTheText(name : String, define :String, color : Color, modifier: Modifier =Modifier){
    Column (
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
**        modifier = modifier
            .fillMaxSize()
            .background(color)
            .padding(16.dp)**
    ){
        Text(
            text = name,
            fontWeight = FontWeight.Bold,
            modifier = Modifier
                .padding(bottom = 16.dp)
        )
        Text(
            text = define,
            textAlign = TextAlign.Justify,
        )
    }
}`

If I use the modifier with Capital M inplace of Bold part in above code i am not getting the desired result.

    Column (
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
**        modifier = modifier**
            .fillMaxSize()
            .background(color)
            .padding(16.dp)

i was trying the following

    **modifier = Modifier**
        .fillMaxSize()
        .background(color)
        .padding(16.dp)

Where as i got my result with

    **modifier = modifier**
        .fillMaxSize()
        .background(color)
        .padding(16.dp)

score 0 · Answer 1 · answered Aug 09 '23 at 15:47

short answer:

basically in your case modifier(small m) is the name of the parameter you are passing to your composable DisplayTheText and Modifier(capital M) is the actual compose modifier.

long answer

in compose its recommended to pass a modifier to each composable so that you can pass to it a different modifier for each case (fill all width / fill half / blue background...) so to pass that modifier to it we pass it as a paramater :

@Composable
fun DisplayTheText(name : String, define :String, color : Color, modifier: Modifier =Modifier){
    Column (
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier
    ){
     //code
    }
}

and then when we call it we give it the disired modifier we want or if we don't pass the modifier parameter it will take the default/empty modifier.

note that if make our modifier like this:

@Composable
fun DisplayTheText(name : String, define :String, color : Color, modifier: Modifier =Modifier){
    Column (
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = modifier.padding(8.dp)
                     .clickable{//code}
    ){
     //code
    }
}

then we call our composable like this:

DisplayTheText(
            name = stringResource(R.string.row_composable),
            define = stringResource(R.string.row_composable_define),
            color = colorResource(R.color.color_3),
            modifier = Modifier.weight(1f)
        )

what will happen is the modifier will actually take the weight modifier first then take the the rest modifiers that we passed as fixed modifier so it will be like this:

Modifier
   .weight(1f)
   .padding(8.dp)
   .clickable{//code}

small tip: the order of modifiers matter significantly read this to understand

Modifier in @Compose functions in Android Studio Kotlin Programming Language

1 Answers1