Clickable SpannableText in Jetpack Compose

<p>Previously I have posted an article how we can span a text in jetpack compose .&nbsp;<a href="https://medium.com/@shmehdi01/spannable-text-in-jetpack-compose-a6ec33a20ec2" rel="noopener">See here</a></p> <p>In compose if you want to make a text clickable either you can us&nbsp;<em>Modifer.clickable</em>&nbsp;on a Text or&nbsp;<strong>ClickableText</strong><em>.</em></p> <p>But We&rsquo;ll use ClickableText because it also give the offset of character when you click.</p> <p>e.g</p> <pre> ClickableText(&quot;Hello&quot;, onClick = { offset -&gt; println(&quot;You clicked on offset $offset&quot;) })</pre> <p>In above code snippet if you click on &lsquo;e&rsquo; of Hello, the output will be&nbsp;<em>You clicked on offset 1.</em></p> <p>This will be helpful when you want click on span text we can easily find clickable span area.</p> <p>Let&rsquo;s create a AnnotatedString (Span text)</p> <pre> ClickableText(text = buildAnnotatedString { append(&quot;I have read &quot;) withStyle(style = SpanStyle(color = Color.Red), ) { append(&quot;Terms and Condition&quot;) } append(&quot; and &quot;) withStyle(style = SpanStyle(color = Color.Red), ) { append(&quot;Privacy policy&quot;) } }, onClick = { println(&quot;Clicked offset $it&quot;) })</pre> <p>Output:</p> <p><img alt="Output of above code snippet" src="https://miro.medium.com/v2/resize:fit:574/1*q_iGfDM2eQoPYJuZ_T6WGg.png" style="height:112px; width:638px" /></p> <p>Now we will detect our span area, So what we do inside the withStyle scope we will add new line&nbsp;<em>pushStringAnnotation</em>&nbsp;it will hold the the annotated string and we can find it later.</p> <p>Also I&rsquo;m refactoring the above code in such sequence manner for better under standing.</p> <p><a href="https://medium.com/@shmehdi01/clickable-spannabletext-in-jetpack-compose-c24514c34f27">Visit Now</a></p>