Cannot access 'RowScopeInstance': it is internal in 'androidx.compose.foundation.layout'

Question

I was trying to achieve the below layout

I tried using Row(Modifier.weight(50f)) that's when the compiler start throwing

If imported from ColumnInstance - import androidx.compose.foundation.layout.ColumnScopeInstance.weight

Cannot access 'ColumnScopeInstance': it is internal in 'androidx.compose.foundation.layout'

If imported from RowInstance - androidx.compose.foundation.layout.RowScopeInstance.weight

Cannot access 'RowScopeInstance': it is internal in 'androidx.compose.foundation.layout'

Attaching my Composable code below

@Composable
fun BoxLayout(){
    Row(Modifier.weight(50f)) {
        BoxWithText()
        BoxWithText()
    }
}

Attaching entire file for reference

package me.sanjaykapilesh.layoutmastery

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScopeInstance.weight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import me.sanjaykapilesh.layoutmastery.ui.theme.LayoutMasteryTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            LayoutMasteryTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    BoxWithText()
                }
            }
        }
    }
}



@Composable
fun BoxLayout(){
    Row(Modifier.weight(50f)) {
        BoxWithText()
        BoxWithText()
    }
}

@Composable
fun BoxWithText() {
    Column() {
        Text(text = "Hello Box!")
        Text(text = "Displays text and follows Material Design guidelines")
    }

}

@Preview(showBackground = true)
@Composable
fun BoxLayoutPreview() {
    LayoutMasteryTheme {
        BoxLayout()
    }
}

I am not sure why I am getting an error. I am also unable to achieve Modifier.weight

Question - https://developer.android.com/codelabs/basic-android-kotlin-compose-composables-practice-problems?authuser=2&continue=https%3A%2F%2Fdeveloper.android.com%2Fcourses%2Fpathways%2Fandroid-basics-compose-unit-1-pathway-3%3Fauthuser%3D2%23codelab-https%3A%2F%2Fdeveloper.android.com%2Fcodelabs%2Fbasic-android-kotlin-compose-composables-practice-problems#3

Answer 1

Some modifiers are unique to scopes that they are defined in like Modifier.weight is only available in RowScope or ColumnScope by default. Or Modifier.align is only available inside BoxScope.

When you wish to access these Modifiers you either need to have your Composables functions in these scopes or create a function that takes @Composable argument with Receiver of these scopes

@Composable
fun BoxLayout(){
    Row(Modifier.weight(50f)) {
        BoxWithText()
        BoxWithText()
    }
}

BoxLayout should return RowScope/ColumnScope as this to be able to use Modifier.weight and this can be done as

@Composable
fun BoxWithLayout(content: @Composable RowScope.()->Unit){
    Row {
        content()
    }
}

@Composable
private fun Sample() {
   BoxWithLayout {
       Row(Modifier.weight(50f)) {
           BoxWithText()
           BoxWithText()
       }
   }
}