Android Jetpack Compose: CompositionLocal Made Easy

<p>InJetpack Compose, we commonly heard about&nbsp;<strong>Recomposition</strong>&nbsp;and&nbsp;<strong>Remember</strong>, the two important concepts to grasps how one can work with Jetpack Compose.</p> <ul> <li><a href="https://medium.com/mobile-app-development-publication/android-jetpack-compose-recomposition-made-easy-527ecc9bcbaf" rel="noopener">Android Jetpack Compose: Recompositiom Made Easy</a></li> <li><a href="https://medium.com/mobile-app-development-publication/android-jetpack-compose-remember-made-easy-8bd86a48536c" rel="noopener">Android Jetpack Compose: Remember Made Easy</a></li> </ul> <p>However, when we check out the&nbsp;<a href="https://github.com/android/compose-samples" rel="noopener ugc nofollow" target="_blank">compose sample apps (e.g. Owl)</a>, we&rsquo;ll see the code as below</p> <pre> <strong><em>CompositionLocalProvider</em></strong>( <em>LocalElevations </em>provides elevation, <em>LocalImages </em>provides images ) <strong>{ </strong><em>MaterialTheme</em>( colors = colors, typography = <em>typography</em>, shapes = <em>shapes</em>, content = content ) <strong>}</strong></pre> <p>What is it?</p> <h1>A problem in normal composable function tree</h1> <p>Before we know what&nbsp;<strong><em>CompositionLocal</em></strong>&nbsp;is, let&rsquo;s understand what problem the composable function tree has.</p> <p>Imagine there&rsquo;s a state variable data that will affect components deep beneath the top-level composable function, i.e. affected components that are indicated by the green color boxes below, then we need to send the state variable data through a lot of composable functions (as indicated by the blue color boxes below).</p> <p><a href="https://medium.com/mobile-app-development-publication/android-jetpack-compose-compositionlocal-made-easy-8632b201bfcd">Visit Now</a></p>