Hello! I'm trying to commonize the UI of my Andro...

# compose

[Min.K]

Hello!

I'm trying to commonize the UI of my Android & iOS apps using Kotlin Compose Multiplatform.

I'm a server-side developer, so I don't have much experience with front-end development.

I want to use SQL Delight to store information and render it on the screen with infinite scrolling. I also want the screen to update immediately when I modify, delete, or create new data rendered on the screen.

Question 1. I want to implement infinite scrolling by utilizing Kotlin Compose Multiplatform. Is there any example I can refer to? I was wondering if utilizing LazyColum and app.cash.paging.compose.collectAsLazyPagingItems is the right answer.

Question 2. When the data source represented by List View is changed in the database, the screen does not change. If there is a proper sample to change the database and update the screen as well, please share.

Is there anyone out there who can help me?

[McEna]

1.- Cash paging is the multiplatform version of jetpack pagination, so any tutorial for the latter should work.

[McEna]

2.-Changing the contents of composable (like a list) depends on the arguments. When a composable function is called, the arguments are used to create the node holding the UI for that function call. If the arguments don't change, the function won't be called again, instead, the previously memoized result will be called. That's what we call "state management". Any values you want to consume from the composable have to be consumed as state, so they will trigger changes when they change themselves. Take a look at Flow viewmodels, as a mechanism to deliver data from observable data sources to a composable

[McEna]

example: https://github.com/fcopardo/PerfTrackingDemo/blob/main/composeApp/src/commonMain/kotlin/github/fcopardo/perfdemo/view/composables/MainViewWidgets.kt#L110

[McEna]

https://github.com/fcopardo/PerfTrackingDemo/blob/main/composeApp/src/commonMain/kotlin/github/fcopardo/perfdemo/view/compositions/MainView.kt#L17

[McEna]

https://github.com/fcopardo/PerfTrackingDemo/blob/main/composeApp/src/androidMain/kotlin/github/fcopardo/perfdemo/view/MainAndroidView.kt#L11

[McEna]

https://github.com/fcopardo/PerfTrackingDemo/blob/main/composeApp/src/iosMain/kotlin/github/fcopardo/perfdemo/view/MainIosView.kt#L11

[McEna]

https://github.com/fcopardo/PerfTrackingDemo/blob/main/composeApp/src/commonMain/kotlin/github/fcopardo/perfdemo/viewmodels/MLSearchViewModel.kt#L14

[McEna]

https://github.com/fcopardo/PerfTrackingDemo/blob/main/composeApp/src/androidMain/[…]github/fcopardo/perfdemo/viewmodels/AndroidMLSearchViewModel.kt

[McEna]

The database should be exposed indirectly (we use the term "repository" for data sources), so it doesn't really matter if you are using a remote endpoint, a plain text file, or a local database. You just emit the objects meant to populate the UI from a ViewModel, which creates said objects by observing Repositories (data sources) in the same fashion.

[McEna]

Basically, every time you send data to the database (the repository), notify possible observers, which should be consumed by a composable as a State object/collection. Then the changes will propagate to the UI.

[McEna]

in this case: https://github.com/fcopardo/PerfTrackingDemo/blob/main/composeApp/src/commonMain/k[…]lin/github/fcopardo/perfdemo/repositories/MLSearchRepository.kt

[McEna]

MLRestApi could be your database.

[Min.K]

Thank you for your detailed response. I'll check out the documents you forwarded!