Jetpack Compose Tricks: Conditionally Applying Modifiers for Dynamic UIs

Blog Infos

Author

Katie Barnett

Published

28. August 2023

Topics

Jetpack Compose

Author

Katie Barnett

Published

28. August 2023

Topics

Jetpack Compose

Streamline your UI code

When we get down to it, software is just a whole lot of if statements…

Modifiers in Jetpack Compose are super powerful, and sometimes we only want to add a modifier if a certain condition is met, but this can quickly get out of hand when the conditions get complex. It can also become quite unreadable and hard for other developers to trace what is being modified and why.

Setting the scene

Take a look at this example, I have a simple scene that switches between dark mode and light mode and a torch turns on and off:

This scene is quite complex to construct with a different Modifier set for each condition:

	@Composable
	fun ComplexModifierScene(
	nighttime: Boolean,
	torchon: Boolean,
	modifier: Modifier = Modifier
	) {
	val boxModifier = if (nighttime && torchon) {
	modifier
	.clip(CircleShape)
	.fillMaxHeight()
	.aspectRatio(1f)
	.background(TorchLight)
	.shadow(elevation = 4.dp, shape = CircleShape)
	} else if (!nighttime) {
	modifier
	.fillMaxHeight()
	.aspectRatio(1f)
	.background(Sunlight)
	} else {
	modifier
	.fillMaxHeight()
	.aspectRatio(1f)
	.background(Night)
	.blur(20.dp)
	}

	Box(boxModifier) {
	Image(painterResource(R.drawable.outline_yard_24), "Scene", Modifier.fillMaxSize())
	}
	}

view raw ComplexModifierScene.kt hosted with ❤ by GitHub

I can try and simplify these modifiers to reduce duplicated code:

	@Composable
	fun ComplexModifierScene(
	nighttime: Boolean,
	torchon: Boolean,
	modifier: Modifier = Modifier
	) {
	val backgroundColor = if (nighttime && torchon) {
	TorchLight
	} else if (!nighttime) {
	Sunlight
	} else {
	Night
	}
	val boxModifier = modifier.background(backgroundColor)
	.fillMaxHeight()
	.aspectRatio(1f)
	val updatedModifier = if (nighttime && torchon) {
	boxModifier
	.clip(CircleShape)
	.shadow(elevation = 4.dp, shape = CircleShape)
	} else if (!nighttime) {
	boxModifier
	} else {
	boxModifier
	.blur(20.dp)
	}

	Box(updatedModifier) {
	Image(painterResource(R.drawable.outline_yard_24), "Scene", Modifier.fillMaxSize())
	}
	}

view raw ComplexModifierScene.kt hosted with ❤ by GitHub

But this is hard to read and understand what is applied when. And for some cases (nighttime == false) we are just passing through the boxModifier as is to satisfy the if statement return value. Also, in order to simplify I have had to change the order of some of the modifiers which has resulted in the clip & background modifier not being applied in the correct order, meaning the background goes outside the clip area:

The original scene on the left, the ‘simplified’ but wrong scene on the right

Create a conditional modifier

What we can do, is construct an extension function that will check the condition and then apply the modifier depending on the result of the condition:

	fun Modifier.conditional(
	condition: Boolean,
	ifTrue: Modifier.() -> Modifier,
	ifFalse: (Modifier.() -> Modifier)? = null,
	): Modifier {
	return if (condition) {
	then(ifTrue(Modifier))
	} else if (ifFalse != null) {
	then(ifFalse(Modifier))
	} else {
	this
	}
	}

view raw ModifierUtil.kt hosted with ❤ by GitHub

Job Offers

Mastering Navigation in Jetpack Compose: A Guide to Using the inclusive Attribute

APPLY NOW

Navigating with Type Safety in Jetpack Compose

APPLY NOW

Flutteristas panel

APPLY NOW

Job Offers

There are currently no vacancies.

OUR VIDEO RECOMMENDATION

droidcon Berlin, Jetpack Compose

Jetpack Compose: Drawing without pain and recomposition

droidcon

This is a talk on recomposition in Jetpack Compose and the myths of too many calls it is followed by. I’ll briefly explain the reasons behind recompositions and why they are not as problematic as…

Watch Video

Jetpack Compose: Drawing without pain and recomposition

Vitalii Markus

Android Engineer

Flo Health Inc.

Jetpack Compose: Drawing without pain and recomposition

Vitalii Markus

Android Engineer

Flo Health Inc.

Jetpack Compose: Drawing without pain and recomposition

Vitalii Markus

Android Engineer

Flo Health Inc.

Jobs

Making use of the Modifier concatenation function then and lambdas in the function signature we can easily chain modifiers one after another.

This can be improved for performance by using the inline Kotlin modifier (thank-you for pointing this out Ricardo Carrapiço!):

	inline fun Modifier.conditional(
	condition: Boolean,
	ifTrue: Modifier.() -> Modifier,
	ifFalse: Modifier.() -> Modifier = { this },
	): Modifier = if (condition) {
	then(ifTrue(Modifier))
	} else {
	then(ifFalse(Modifier))
	}

view raw ModifierUtil.kt hosted with ❤ by GitHub

Adding this into the scene:

	@Composable
	fun ComplexModifierScene(
	nighttime: Boolean,
	torchon: Boolean,
	modifier: Modifier = Modifier
	) {
	val backgroundColor = if (nighttime && torchon) {
	TorchLight
	} else if (!nighttime) {
	Sunlight
	} else {
	Night
	}

	val boxModifier = modifier
	.conditional(nighttime && torchon, {
	clip(CircleShape)
	})
	.fillMaxHeight()
	.aspectRatio(1f)
	.background(backgroundColor)
	.conditional(nighttime && torchon, {
	shadow(elevation = 4.dp, shape = CircleShape)
	})
	.conditional(nighttime && !torchon, {
	blur(20.dp)
	})

	Box(boxModifier) {
	Image(painterResource(R.drawable.outline_yard_24), "Scene", Modifier.fillMaxSize())
	}
	}

view raw ComplexModifierScene.kt hosted with ❤ by GitHub

This is now much easier to read. To even further simplify the conditions, we can nest them.

	@Composable
	fun ComplexModifierScene(
	nighttime: Boolean,
	torchon: Boolean,
	modifier: Modifier = Modifier
	) {
	val backgroundColor = if (nighttime && torchon) {
	TorchLight
	} else if (!nighttime) {
	Sunlight
	} else {
	Night
	}

	val boxModifier = modifier
	.conditional(nighttime && torchon, {
	clip(CircleShape)
	})
	.fillMaxHeight()
	.aspectRatio(1f)
	.background(backgroundColor)
	.conditional(nighttime, {
	conditional(
	condition = torchon,
	ifTrue = {
	shadow(elevation = 4.dp, shape = CircleShape)
	},
	ifFalse = {
	blur(20.dp)
	}
	)
	})

	Box(boxModifier) {
	Image(painterResource(R.drawable.outline_yard_24), "Scene", Modifier.fillMaxSize())
	}
	}

view raw ComplexModifierScene.kt hosted with ❤ by GitHub

This gives the exactly the same scene as the original scene as we can respect the modifier ordering.

Exactly the same as the original

Null conditional modifier

A common condition that you may want to check is if something is null or not, we can also create a nullConditional modifier that takes in a type argument and passes that in to the ifNotNull branch so it can be used by the modifier:

	inline fun <T> Modifier.nullConditional(
	argument: T?,
	ifNotNull: Modifier.(T) -> Modifier,
	ifNull: Modifier.() -> Modifier = { this },
	): Modifier {
	return if (argument != null) {
	then(ifNotNull(Modifier, argument))
	} else {
	then(ifNull(Modifier))
	}
	}

view raw ModifierUtil.kt hosted with ❤ by GitHub

This can be used just the same as the regular conditional modifier, the condition variable value is passed into the ifNotNull lambda so it can be used in the modifier being applied. In this example, I am passing in a nullable colour that can be applied if present:

	@Composable
	fun ComplexModifierScene(
	nighttime: Boolean,
	torchon: Boolean,
	backgroundColor: Color?,
	modifier: Modifier = Modifier
	) {
	val boxModifier = modifier
	.conditional(nighttime && torchon, ifTrue = {
	clip(CircleShape)
	})
	.fillMaxHeight()
	.aspectRatio(1f)
	.nullConditional(backgroundColor, {
	background(it)
	})
	.conditional(nighttime, {
	conditional(
	condition = torchon,
	ifTrue = {
	shadow(elevation = 4.dp, shape = CircleShape)
	},
	ifFalse = {
	blur(20.dp)
	}
	)
	})

	Box(boxModifier) {
	Image(painterResource(R.drawable.outline_yard_24), "Scene", Modifier.fillMaxSize())
	}
	}