Kocktail

Cocktail Directory App made with Kotlin Multiplatform Mobile

Preview

Libraries Used

• Kotlinx Coroutines
  • KMP-NativeCoroutines This makes it possible to use StateFlow on iOS
• Jetpack Viewmodel
  • KMM-ViewModel This makes it possible to write common ViewModel code for iOS and Android
• Ktor Using OkHttp engine for Android and Darwin engine for iOS
• Kotlinx Serialization

Code Overview

Shared ViewModel

class CocktailListViewModel : KMMViewModel() {
    private val api = CocktailAPI()

    private val _cocktailState = MutableStateFlow<CocktailListState>(CocktailListState.Empty)

    @NativeCoroutinesState
    val cocktailState: StateFlow<CocktailListState> = _cocktailState.stateIn(
        viewModelScope, SharingStarted.WhileSubscribed(), CocktailListState.Empty
    )

    fun updateCocktailList() {
        _cocktailState.value = CocktailListState.Loading
        viewModelScope.coroutineScope.launch {
            try {
                val response = api.getCocktails()
                _cocktailState.value = CocktailListState.Success(response)
            } catch (e: Exception) {
                _cocktailState.value = CocktailListState.Error(e)
            }
        }
    }
}

iOS View

CocktailItemRowView – view to render each list item

View Code

CocktailListView – view for rendering the list (or errors/loading)

View Code

ContentView – main screen of the app

View Code

Android View

CocktailItemRowView – view to render each list item

View Code

CocktailListView – view for rendering the list (or errors/loading)

* includes Pull to Refresh functionality

View Code

MainActivity – main screen of the app

View Code

GitHub

View Github