CODEWITHSUNDEEP
androidandroid-jetpack-compose
Barry Irvine
Barry Irvine

Reputation: 13867

Correct way to write a Modifier factory function

I have the following method which sets the width of something in a LazyItemScope to 300.dp if the screen width is 600.dp or more or 80% of the width is smaller.

@Composable
private fun LazyItemScope.widthModifier(configuration: Configuration = LocalConfiguration.current): Modifier =
    if (configuration.screenWidthDp >= 600) Modifier.width(300.dp) else Modifier.fillParentMaxWidth(.8f)

This gives a warning that Modifier factory functions should used composed so I rewrote it as follows:

private fun LazyItemScope.widthModifier(): Modifier =
    Modifier.composed {
        val configuration: Configuration = LocalConfiguration.current
        if (configuration.screenWidthDp >= 600) Modifier.width(300.dp) else Modifier.fillParentMaxWidth(.8f)
    }

But I still get an error message stating that Modifier extension functions should be extensions on Modifier. But if it is an extension on Modifier then fillParentMaxWidth is not available.

Is there any way I can rewrite this to make it compliant with the lint checks?

Upvotes: 1

Views: 547

Answers (1)

Thracian
Thracian

Reputation: 66599

You can either suppress lint warning as

@SuppressLint("ModifierFactoryExtensionFunction")
private fun LazyItemScope.widthModifier(): Modifier =
    Modifier.composed {
        val configuration: Configuration = LocalConfiguration.current
        if (configuration.screenWidthDp >= 600) Modifier.width(300.dp) else Modifier.fillParentMaxWidth(.8f)
    }

and use it inside LazyItemScope as

LazyColumn() {
    items(100){
        this.widthModifier()
    }
}

or pass alternative modifier as parameter to Modifier extension function as

private fun Modifier.widthModifier2(modifier: Modifier): Modifier = composed {
        val configuration: Configuration = LocalConfiguration.current
        if (configuration.screenWidthDp >= 600) Modifier.width(300.dp) else modifier
    }

And use as

LazyColumn() {
    items(100) {
        Modifier.widthModifier2(Modifier.fillParentMaxWidth(.8f))
    }
}

Upvotes: 2

Related Questions