SUBSCRIBE NOW
avatar
I always learn something just by skimming it that makes me want to bookmark the issue now and dig deeper later
SUBSCRIBE NOW
avatar
Keep up the good work with the newsletter 💪 I really enjoy it
SUBSCRIBE NOW
avatar
Dispatch is a must read for Android devs today and my go-to for keeping up with all things Jetpack Compose
SUBSCRIBE NOW
avatar
Dispatch has been my go-to resource as it's packed with useful information while being fun at the same time
SUBSCRIBE NOW
avatar
The content is light, fun, and still useful. I especially appreciate the small tips that are in each issue
SUBSCRIBE NOW
avatar
I truly love this newsletter ❤️‍🔥 Spot on content and I know there's a lot of effort that goes behind it
SUBSCRIBE NOW
avatar
Thanks for taking the time and energy to do it so well
JetpackCompose.app's Newsletter
avatar
I always learn something just by skimming it that makes me want to bookmark the issue now and dig deeper later
JetpackCompose.app's Newsletter
avatar
Keep up the good work with the newsletter 💪 I really enjoy it
JetpackCompose.app's Newsletter
avatar
Dispatch is a must read for Android devs today and my go-to for keeping up with all things Jetpack Compose
JetpackCompose.app's Newsletter
avatar
Dispatch has been my go-to resource as it's packed with useful information while being fun at the same time
JetpackCompose.app's Newsletter
avatar
The content is light, fun, and still useful. I especially appreciate the small tips that are in each issue
JetpackCompose.app's Newsletter
avatar
I truly love this newsletter ❤️‍🔥 Spot on content and I know there's a lot of effort that goes behind it
JetpackCompose.app's Newsletter
avatar
Thanks for taking the time and energy to do it so well

ifTrue Modifier

Author: John Doe

Modifiers are one of my favorite features of Jetpack Compose. They allow you to visually update a composable function and add more functionality to them. One of the reasons they are so elegant is because you can chain them. This results in an intuitive API that's easy to work with. Here's an example-

@composable
fun MyComponent() {
  Box(
    modifier = Modifier
      .fillMaxWidth()
      .background(Color.Cyan)
      .padding(16.dp)
      .
  ) {...}
}

Note: The order in which the Modifiers are applied makes a difference to the end result.

When using these API's in real world scenarios, you are often in a situation where you want to apply Modifiers only when a condition is met. Let's look at one such example-

fun MyComponent(
  isError: Boolean
) {
  var modifierChain = Modifier.fillMaxWidth()
  if (isError) {
    modifierChain = modifierChain.background(Color.Red)
  }
  Box(
    modifier = modifierChain
      .padding(16.dp)
  ) {...}
}

Here, we want to add the background modifier only if the isError prop is true. In order to make sure we chain them properly, we need to hold a reference to the modifier chain and add the background modifier to this reference when isError is true. This can get out of hand really quickly when you have multiple conditions that determine which Modifier needs to be applied.

* ifTrue Modifier has entered the chat *

Using this simple and elegant snippet, I can add the conditional logic in the chain itself and the code looks significantly cleaner now!

fun MyComponent(
  isError: Boolean
) {
  Box(
    modifier = Modifier.fillMaxWidth()
      .ifTrue(isError) { background(Color.Red) }
      .padding(16.dp)
  ) {...}
}

Slick isn't it?

inline fun Modifier.ifTrue(predicate: Boolean, builder: () -> Modifier) =
then(if (predicate) builder() else Modifier)

Have a project you'd like to submit? Fill this form, will ya!

If you like this snippet, you might also like:

Maker OS is an all-in-one productivity system for developers

I built Maker OS to track, manage & organize my life. Now you can do it too!