Android Jetpack Compose: CompositionLocal Made Easy
<p>InJetpack Compose, we commonly heard about <strong>Recomposition</strong> and <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 <a href="https://github.com/android/compose-samples" rel="noopener ugc nofollow" target="_blank">compose sample apps (e.g. Owl)</a>, we’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 <strong><em>CompositionLocal</em></strong> is, let’s understand what problem the composable function tree has.</p>
<p>Imagine there’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>