A brief but cool example of some advanced Jetpack Compose. The FlowRow
Tags: mobile, andriod, kotlin, tristan
Published: 2024-02-22 01:08:23

### Table of contents
1. [Introduction](#intro)
2. [Resources](#res)
3. [The FlowRow()](#flow)
4. [The Interesting part](#inter)


### My app on the Google play store
- [The app](https://play.google.com/store/apps/details?id=elliott.software.clicker)


### Introduction <a name="intro"></a>
- This blog post will give you a demonstration of what can be done when someone has a advanced understanding of the Jetpack compose system. I won't go into details about the advanced topics of Jetpack compose (specifically because I don't have a good understanding of them). However, I will give you a demonstration of something cool(FlowRow) that was created by someone who has a deep understanding of the advanced topics in jetpack compose. I will also give you resources if you wish to read more about these topics.

### Resources <a name="res"></a>
- [How Jetpack Compose Measuring Works](https://developer.squareup.com/blog/how-jetpack-compose-measuring-works/)
- [Jetpack Compose phases ](https://developer.android.com/jetpack/compose/phases)
- [Custom layouts](https://developer.android.com/jetpack/compose/layouts/custom)


### The FlowRow() <a name="flow"></a>
- So I made this UI where the little tags at the bottom were created via a FlowRow(). HERE is the code:
```
FlowRow(
            modifier = Modifier.background(Color.Transparent).padding(bottom = 10.dp)
        ) {
            tags.forEach { tagTitle ->
                VerticalTagText(tagTitle)
            }
        }
```
- Here is the UI:
![depicting the FlowRow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qy4mjcmaljebdfep7jbr.png)
- Notice how the tags(Cozy, GoodVibes, SFW, ect...) at the bottom, automatically wrap. This is very useful but it makes me curious.... how is it doing this?

### The Interesting part <a name="inter"></a>
- The interesting part of the `FlowRow()` is when we look at the source code, [HERE](https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/foundation/foundation-layout/src/commonMain/kotlin/androidx/compose/foundation/layout/FlowLayout.kt?q=FlowRow&ss=androidx%2Fplatform%2Fframeworks%2Fsupport:compose%2F). We can see on [THIS](https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/foundation/foundation-layout/src/commonMain/kotlin/androidx/compose/foundation/layout/FlowLayout.kt;l=98?q=FlowRow&ss=androidx%2Fplatform%2Fframeworks%2Fsupport:compose%2F) line that the compose team is creating a `custom measure policy` . Which is a part of the compose lifecycle, specifically the `measuring` phase.

- I find all this so interesting because we can read about [How Jetpack Compose Measuring Works](https://developer.squareup.com/blog/how-jetpack-compose-measuring-works/) and see a real life implementation and it gets used by a ton of people!!!!!! Finally a real work example!!!!!
- Very cool right?!?!?! I love a good practical example. Ok thats it for me, happy coding :)



### Conclusion 
- Thank you for taking the time out of your day to read this blog post of mine. If you have any questions or concerns please comment below or reach out to me on [Twitter](https://twitter.com/AndroidTristan).