I decided to test out Jetpack Compose by making a simple Twitter UI clone after I came across this tweet by Mariano Zorrilla:
He used Flutter (which is an amazing tool btw for building cross platform apps) — with just one day of work, 1500 lines of code. That’s beyond impressive (specially the fact that Flutter can be hosted on CodePen as well).
So with similar constraints, I wanted to try out Jetpack Compose. I followed the CodePen example (as closely as I could) and this is the result:
Complete source code:
The App
There are three screens in this app
Home Screen
Profile Screen
Compose Screen
App State
Before we get to the screens — take a look at app state model, which will be used for navigation and theming. I also added some helpers for navigating to individual screens & for checking theme.
Models
There are two models — both data classes. The Tweet model is annotated with @Model as we update this model from our composed functions to update view state. User stays the same, hence it’s not annotated.