LazyColumn dont displaying

Question

I want to make a list of bots that I get from my database in firebase, but I don't know why the text() of BotList() are not shown on the screen, although the implementation seems correct, thank you very much.

class DiscoverActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            FluctusTheme {
                val navController = rememberNavController()
                DiscoverActivityUI(navController)
            }
        }
    }
}

@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
@Composable
fun DiscoverActivityUI(navController: NavController?) {
    val systemUiController = rememberSystemUiController()
    DisposableEffect(systemUiController) {
        systemUiController.setStatusBarColor(
            color = backgroundColor,
        )
        systemUiController.setNavigationBarColor(
            color = white
        )
        onDispose {}
    }

    Scaffold(
        modifier = Modifier.fillMaxSize(),
        bottomBar = { BottomNavigationBar(navController = navController) }
    )  {
        Surface(
            color = backgroundColor,
            modifier = Modifier.fillMaxSize()
        ) {
           ** BotList() **
        }
    }
}



@Composable
fun BotList() {
    val botData = BotData()

    LaunchedEffect(Unit) {
        botData.mutableBotList.clear()
        botData.updateBotList()
    }

    LazyColumn(
        modifier = Modifier.fillMaxWidth()
    ) {
        **items(botData.mutableBotList) { bot ->
            bot.name?.let { Text(text = it, style = TextStyle(fontSize = 16.sp)) }
            bot.type?.let { Text(text = it, style = TextStyle(fontSize = 14.sp)) }
            bot.profit_percent?.let { Text(text = it, style = TextStyle(fontSize = 12.sp)) }**
        }
    }
}

class BotData {
    var fireStoreInstance = FirebaseFirestore.getInstance()

    data class Bots(
        val name: String?,
        val type: String?,
        val profit_percent: String?,
        val isOnCurrentAccount: Boolean?
    )

    fun updateBotList() {
        fireStoreInstance.collection("marketplace").get().addOnCompleteListener {
            if(it.isSuccessful) {
                for(document in it.result) {
                    val name = document.getString("name")
                    val type = document.getString("type")
                    val profit_percent = document.getString("profit_percent")

                    val newBot = Bots(
                        name = name,
                        type = type,
                        profit_percent = profit_percent,
                        isOnCurrentAccount = false
                    )
                    mutableBotList.add(newBot)
                    println(mutableBotList)
                }
            } else {
                println("hubo un error")
            }
        }
    }

    val mutableBotList = mutableListOf<Bots>()
}

texts in the lazy columns dont showing in the screen, although the implementation seems correct, thank you very much.

I forgot to mention that the values are passed well from firebase, so I put a print inside the lazycolumn {} and it doesn't run, so the problem seems to be there, it's not a null or void issue — Santi machin, Jul 27 '23 at 18:58
I think that this [resource](https://medium.com/firebase-tips-tricks/how-to-make-a-clean-architecture-android-app-using-mvvm-firestore-and-jetpack-compose-abdb5e02a2d8) will also help. Here is the corresponding [repo](https://github.com/alexmamo/FirestoreCleanArchitectureApp). — Alex Mamo, Jul 28 '23 at 08:25

score 0 · Accepted Answer · answered Jul 27 '23 at 19:18

First add a ViewModel for your Bots data.

class BotViewModel: ViewModel() {

    var fireStoreInstance = FirebaseFirestore.getInstance()

    data class Bots(
        val name: String?,
        val type: String?,
        val profit_percent: String?,
        val isOnCurrentAccount: Boolean?
    )

    fun updateBotList() {
        val mutableBotList = mutableListOf<Bots>()
        fireStoreInstance.collection("marketplace").get().addOnCompleteListener {
            if(it.isSuccessful) {
                for(document in it.result) {
                    val name = document.getString("name")
                    val type = document.getString("type")
                    val profit_percent = document.getString("profit_percent")

                    val newBot = Bots(
                        name = name,
                        type = type,
                        profit_percent = profit_percent,
                        isOnCurrentAccount = false
                    )
                    mutableBotList.add(newBot)
                    println(mutableBotList)
                }

                mutableBotLiveData.value = mutableBotList
            } else {
                println("hubo un error")
            }
        }
    }

    val mutableBotLiveData = MutableLiveData<MutableList<Bots>>()
}

Next add the View Model to your Activity.

class DiscoverActivity : ComponentActivity() {
    val botViewModel by viewModels<BotViewModel>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            FluctusTheme {
                val navController = rememberNavController()
                DiscoverActivityUI(navController, botViewModel)
            }
        }
    }
}

Pass the ViewModel through to your BotsList composable.

@SuppressLint("UnusedMaterialScaffoldPaddingParameter")
@Composable
fun DiscoverActivityUI(navController: NavController?, viewModel: BotViewModel) {
    val systemUiController = rememberSystemUiController()
    DisposableEffect(systemUiController) {
        systemUiController.setStatusBarColor(
            color = backgroundColor,
        )
        systemUiController.setNavigationBarColor(
            color = white
        )
        onDispose {}
    }

    Scaffold(
        modifier = Modifier.fillMaxSize(),
        bottomBar = { BottomNavigationBar(navController = navController) }
    )  {
        Surface(
            color = backgroundColor,
            modifier = Modifier.fillMaxSize()
        ) {
            BotList(
                viewModel = viewModel
            )
        }
    }
}

Finally use observeAsState with your ViewModel data and the composable will recompose when the data changes, in this case when mutableBotLiveData.value = mutableBotList is called in updateBotList.

@Composable
fun BotList(viewModel: BotViewModel) {
    val botsData by viewModel.mutableBotLiveData.observeAsState(mutableListOf())

    LaunchedEffect(Unit) {
        viewModel.mutableBotLiveData.value!!.clear()
        viewModel.updateBotList()
    }

    LazyColumn(
        modifier = Modifier.fillMaxWidth()
    ) {
        items(botsData) { bot ->
            bot.name?.let { Text(text = it, style = TextStyle(fontSize = 16.sp)) }
            bot.type?.let { Text(text = it, style = TextStyle(fontSize = 14.sp)) }
            bot.profit_percent?.let { Text(text = it, style = TextStyle(fontSize = 12.sp)) }
        }
    }
}

LazyColumn dont displaying

1 Answers1