Convert Live Data to kotlin flow in jetpack compose

Question

Hey I am new in jetpack compose. I am checking in internet is available or not and consume through live data. Now I started learning jetpack compose so I want to use Flow, So any guys help me to convert this LiveData to flow and use in jetpack compose.

NetworkConnection.kt

import android.app.Application
import android.content.Context
import android.net.ConnectivityManager
import android.net.Network
import android.net.NetworkRequest
import androidx.lifecycle.LiveData

class NetworkConnection(private val connectivityManager: ConnectivityManager) : LiveData<Boolean>() {

    constructor(application: Application) : this(application.getSystemService(Context.CONNECTIVITY_SERVICE) as ConnectivityManager)

    private val networkCallback = object : ConnectivityManager.NetworkCallback() {
        override fun onAvailable(network: Network) {
            super.onAvailable(network)
            postValue(true)
        }

        override fun onLost(network: Network) {
            super.onLost(network)
            postValue(false)
        }
    }

    override fun onActive() {
        super.onActive()
        val builder = NetworkRequest.Builder()
        connectivityManager.registerNetworkCallback(builder.build(), networkCallback)
    }

    override fun onInactive() {
        super.onInactive()
        connectivityManager.unregisterNetworkCallback(networkCallback)
    }

}

Can someone help me which way of doing recommendations for kotlin flow in jetpack compose.

MainActivity.kt

class MainActivity : ComponentActivity() {

    private lateinit var checkNetworkConnection: NetworkConnection

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        checkNetworkConnection = NetworkConnection(application)
        setContent {
            SportsResultTheme {
                SetupView()
            }
        }
    }
}

I am confused also how can I use flow in my compose in recommendation way. Thanks

Answer 1

NetworkConnection.kt ->

    class NetworkConnection(private val connectivityManager: ConnectivityManager) {

    init {
        registerNetworkCallback()
    }

    constructor(application: Application) : this(application.getSystemService(Context.CONNECTIVITY_SERVICE) as ConnectivityManager)

    val stateFlow: StateFlow<State>
        get() = _stateFlow

    private val _stateFlow: MutableStateFlow<State> = MutableStateFlow(State.Init)

    private val networkCallback = object : ConnectivityManager.NetworkCallback() {
        override fun onAvailable(network: Network) {
            super.onAvailable(network)
            _stateFlow.value = State.Available
        }

        override fun onLost(network: Network) {
            super.onLost(network)
            _stateFlow.value = State.Gone
        }
    }

    fun registerNetworkCallback(){
        val builder = NetworkRequest.Builder()
        connectivityManager.registerNetworkCallback(builder.build(), networkCallback)
    }

    fun unregisterNetworkCallback() {
        connectivityManager.unregisterNetworkCallback(networkCallback)
    }

    sealed interface State {
        object Init : State
        object Available : State
        object Gone : State
    }

}

MainActivity.kt

class MainActivity : ComponentActivity() {

    private lateinit var checkNetworkConnection: NetworkConnection

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        checkNetworkConnection = NetworkConnection(application)
        setContent {
            SportsResultTheme {
            checkNetworkConnection.stateFlow.collectAsState()
                SetupView()
            }
        }
    }
}

Answer 2

Jetpack compose has function (LiveData.observeAsState()) available to convert LiveData to State that you can use in your Compose UI. You don't have to use Flow if you already have a LiveData in your code base. Pass you live data into the composable and convert it to a state. You can also convert live data to state before you call the SetupView composable and just pass the state itself.

@Composable
fun SetupView(networkConnection : NetworkConnection) {
    val isConnected = networkConnection.observeAsState()
    
    if(isConnected) {
        // update for connected state
    } else {
        // handle offline state
    }
}