Why does my app keep stopping after implementing a ViewModel and Dialog pop up?

Question

I started this new project for tracking information of goats on a Goat farm. It's my first time using ViewModels for a pop up Dialog and I'm assuming that's where it went wrong, before the viewModel and dialog implementation, it went smoothly.

Now, there are no errors and the gradle build runs smoothly but the App keeps stopping.

Here's the code, probably a silly issue I missed:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.viewModels
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.lazy.grid.GridCells
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
import androidx.compose.foundation.lazy.grid.items
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.Card
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.googlefonts.Font
import androidx.compose.ui.text.googlefonts.GoogleFont
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.goats.ui.theme.CustomDialog
import com.example.goats.ui.theme.DataSource
import com.example.goats.ui.theme.DataSource.goats
import com.example.goats.ui.theme.Goats
import com.example.goats.ui.theme.GoatsTheme
import com.example.goats.ui.theme.MainViewModel
import androidx.fragment.app.activityViewModels
import androidx.fragment.app.Fragment
import androidx.lifecycle.viewmodel.compose.viewModel


class MainActivity : AppCompatActivity() {
    private val viewModel by viewModels<MainViewModel>()
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            GoatsTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {

                    GoatsApp()
                    
                }
            }
        }
    }
}

@Composable
fun GoatsApp() {
    val provider = GoogleFont.Provider(
        providerAuthority = "com.google.android.gms.fonts",
        providerPackage = "com.google.android.gms",
        certificates = R.array.com_google_android_gms_fonts_certs

    )
    val fontName = GoogleFont("Lato")

    val fontFamily = FontFamily(
        Font(googleFont = fontName, fontProvider = provider)
    )
Column(modifier = Modifier.padding(16.dp)) {
    Text(text = "Does", modifier = Modifier
        .background(color = Color.LightGray)
        .fillMaxWidth()
        .padding(12.dp),
        fontStyle = FontStyle.Italic,
        textAlign = TextAlign.Center,
        fontFamily = fontFamily,
        fontWeight = FontWeight.ExtraLight
    )


    GoatList(goatList = DataSource.goats, modifier = Modifier.padding(8.dp))
    

}
}

@Composable
fun GoatCard(allgoats: Goats, viewModel: MainViewModel) {
val years = allgoats.age.toString()



Card(modifier = Modifier) {
    Row{

     Image(painter = painterResource(allgoats.image), contentDescription = (allgoats.name.toString()),
         modifier = Modifier.size(68.dp),
        contentScale = ContentScale.Crop)

Column(Modifier.width(120.dp)) {

        Text(text = stringResource(allgoats.name), modifier = Modifier.padding(8.dp),
            style = MaterialTheme.typography.titleSmall)
    Row{
        Text(text = stringResource(allgoats.breed), modifier = Modifier.padding(8.dp), style = MaterialTheme.typography.bodySmall)
        Text(years, modifier = Modifier.padding(8.dp), style = MaterialTheme.typography.bodySmall)

       Box {
        Button(onClick = { viewModel.isGoatClick() },
            modifier = Modifier.fillMaxWidth(), colors = ButtonDefaults.buttonColors(Color.LightGray)) { }
            Text(text = "More",
                style = MaterialTheme.typography.bodySmall,
                textAlign = TextAlign.End,
                fontWeight = FontWeight.Bold,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(end = 6.dp, top = 12.dp))

           



       }
    }

    if(viewModel.isDialogShown) {
        CustomDialog(onDismiss = {viewModel.onDismissDialog()}, myGoats = Goats(name = allgoats.name, age = allgoats.age, breed = allgoats.breed, image = allgoats.image))
    }

}
    }
}
}


@Composable
fun GoatList(goatList: List<Goats>, modifier: Modifier = Modifier.padding(8.dp)) {

    LazyVerticalGrid(columns = GridCells.Fixed(1), modifier.padding(8.dp), verticalArrangement = Arrangement.spacedBy(8.dp)) {
        items(goats) { allgoats ->
            GoatCard(allgoats = allgoats, viewModel = MainViewModel())
        }
        
    }
    
}

And MainViewModel code:

import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.setValue
import androidx.lifecycle.ViewModel

class MainViewModel : ViewModel() {
    var isDialogShown by mutableStateOf(false)
        private set

    fun isGoatClick() {
        isDialogShown = true
    }

    fun onDismissDialog() {
        isDialogShown = false
    }



}```

Answer 1

Solved it by changing class MainActivity : AppCompatActivity() to

class MainActivity : ComponentActivity()