Home > Enterprise >  Jetpack Compose - unresolved refence when using viewmodel value in LazyColumn
Jetpack Compose - unresolved refence when using viewmodel value in LazyColumn

Time:06-09

For my college project I want to use data from Firestore, and then use MVVM pattern to display the items on the Lazy Column.

Here is the code of the screen of where I want the values of viewmodel to be displayed:

fun HomeScreen (navController: NavController, viewModel: ArticleViewModel = hiltViewModel()){
    var expanded = remember { mutableStateOf(false) }
    val articleResponse = viewModel.articleState.value
    Scaffold() {
        LazyColumn(
            modifier = Modifier
                .fillMaxSize()
                .background(Color.White)
        ) {
            items(items = articleResponse.data) {
                ArticleList(model = it) { model ->
                    Log.d("TAG", "Clicked on $model")
                    navController.navigate(route = NavScreens.DetailScreen.name  "/$model")

                }


            }
        }
    }
}

Here is the field of where exactly I get the error that is I mentioned in the title:

here

Previously I used an array to display the item in the LazyColumn and it worked normally. Perhaps, the problem lies in the ViewModel? Here is the ViewModel that I'm using:

@HiltViewModel
class ArticleViewModel @Inject constructor(
    private val useCases: UseCases
):ViewModel() {
    private val _articleState = mutableStateOf<Response<List<Article>>>(Response.Loading)
    val articleState: State<Response<List<Article>>> = _articleState


   init {
        getArticles()
    }

    private fun getArticles() {
        viewModelScope.launch {
            useCases.getArticle().collect { response ->
                _articleState.value = response
            }
        }
    }

}

When I tried searching for the solution, I've read that the problem could be with the dependencies/plugins, I have tried changing couple of the dependencies but the issue still persists. I've heard that some of the plugins doesn't work with others since I'm new to jetpack compose it is harder for me to identify the issues within the dependencies.

Here is my Gradle files:

buildscript {
    ext {
        compose_version = '1.0.1'
        hilt_version = "2.40.5"
        gradle_version = "7.2.0"
        kotlin_version = "1.6.20"
        coroutines_version = "1.6.1"
        google_services_version = "4.3.10"
        hilt_version = "2.40.5"
        core_version = "1.7.0"
        appcompat_version = "1.4.1"
        live_data_version = "2.4.1"
        activity_compose_version = "1.4.0"
        material_version = "1.6.0"
        hilt_navigation_compose_version = "1.0.0"
        firebase_bom_version = "30.0.0"
    }
    repositories {
        google()
        mavenCentral()
    }
    dependencies {
        classpath 'com.google.gms:google-services:4.3.4'
        classpath "com.google.dagger:hilt-android-gradle-plugin:$hilt_version"
        classpath "com.android.tools.build:gradle:$gradle_version"
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath "com.google.gms:google-services:$google_services_version"
    }
}// Top-level build file where you can add configuration options common to all sub-projects/modules.
plugins {
    id 'com.android.application' version '7.1.3' apply false
    id 'com.android.library' version '7.1.3' apply false
    id 'org.jetbrains.kotlin.android' version '1.5.21' apply false

}

task clean(type: Delete) {
    delete rootProject.buildDir
}

plugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'com.google.gms.google-services'
    id 'dagger.hilt.android.plugin'
    id 'kotlin-kapt'
}

android {
    compileSdk 31

    defaultConfig {
        applicationId "com.example.flow"
        minSdk 28
        targetSdk 31
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        vectorDrawables {
            useSupportLibrary true
        }
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
    buildFeatures {
        compose true
    }
    composeOptions {
        kotlinCompilerExtensionVersion compose_version
        kotlinCompilerVersion '1.5.21'
    }
    packagingOptions {
        resources {
            excludes  = '/META-INF/{AL2.0,LGPL2.1}'
        }
    }
}

dependencies {
    implementation "androidx.compose.compiler:compiler:1.0.0-beta08"
    implementation 'androidx.core:core-ktx:1.7.0'
    implementation "androidx.compose.ui:ui:$compose_version"
    implementation "androidx.compose.material:material:$compose_version"
    implementation "androidx.compose.ui:ui-tooling-preview:$compose_version"
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.3.1'
    implementation 'androidx.activity:activity-compose:1.3.0-alpha02'
    implementation "androidx.appcompat:appcompat:$appcompat_version"
    implementation 'com.google.android.material:material:1.4.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.3'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
    androidTestImplementation "androidx.compose.ui:ui-test-junit4:$compose_version"
    debugImplementation "androidx.compose.ui:ui-tooling:$compose_version"

    implementation "androidx.core:core-splashscreen:1.0.0-beta02"
    implementation "androidx.navigation:navigation-compose:2.4.0-alpha10"
    implementation("io.coil-kt:coil-compose:2.1.0")
    implementation "com.google.firebase:firebase-firestore:22.0.1"

    implementation "com.google.dagger:hilt-android:$hilt_version"
    implementation platform("com.google.firebase:firebase-bom:$firebase_bom_version")
    implementation "com.google.firebase:firebase-firestore-ktx"
    kapt "com.google.dagger:hilt-android-compiler:$hilt_version"
    kapt "androidx.hilt:hilt-compiler:1.0.0"
    implementation "androidx.hilt:hilt-navigation-compose:$hilt_navigation_compose_version"
    implementation "org.jetbrains.kotlinx:kotlinx-coroutines-play-services:$coroutines_version"
    implementation "androidx.lifecycle:lifecycle-livedata-ktx:$live_data_version"
    
    
}

I would be grateful if you are able to assist me on finding the solution.

CodePudding user response:

The problem is that articleState.value is Response not List. You can do something like that:

val articleResponse = viewModel.articleState.value

when (articleResponse) {
  Response.Loading -> <LoadingComponenet />
  Response.Error -> <ErrorComponent />
  Response.Success -> Scaffold() {
                        .............
                    } 
}
  • Related