2-Way Flow Using Jetpack Compose and Datastore | by Kliment Joncheski | Apr, 2022

Tips on how to use MVVM in your Android initiatives

Photograph by Zhipeng Ya on Unsplash

I simply began enjoying round with the Jetpack Compose APIs and the datastore and I discover it actually helpful to make use of.

Let’s make a easy demo app the place we’ll have bidirectional(2-way) stream of knowledge.

We’ll be utilizing MVVM as structure for our little challenge, utilizing Jetpack compose library and Datastore library. Coroutines is available in right here as pure half. Let’s begin!

That is what our demo app will appear like:

Our principal structure seems like this:

We see how our 2 means stream seems like. On the left aspect, we now have the view the place on person interplay the information is modified, then the ViewModel forwards this modified information to the datastore and there the brand new information its endured.

As quickly as the information is endured to the Datastore it emits a brand new information stream and that is forwarded again to the View and UI may be up to date. That is actually easy resolution and there’s no want for boilerplate code for subscribing/observing/binding views with ViewModels.

The UI chances are high triggered with each emit on the stream information. And that is triggered with each UI change adopted by Datastore probabilities.

//Composable UI factor that handles onTextChangeAction
@Composable
enjoyable DataStorePlaygroundActivityComponent(
stringData: String,
keyboardController: SoftwareKeyboardController?,
onTextChangeAction: (dataString: String) -> Unit
)
val textAnswerState = keep in mind
mutableStateOf("")

JetPackPlaygroundAppTheme
Floor
(coloration = MaterialTheme.colours.background)
Column(Modifier.fillMaxSize())
Title("DataStore Playground")
Spacer(modifier = Modifier.top(16.dp))
NormalText("Information: $stringData")
Spacer(modifier = Modifier.top(32.dp))
TextFieldSingleLine(
textAnswerState,
"enter settings textual content",
keyboardController,
onTextChangeAction
)



//Exercise|Fragment view setting the composable
DataStorePlaygroundActivityComponent(
stringData,
LocalSoftwareKeyboardController.present
) dataString ->
dataStoreViewModel?.saveDefaultText(dataString)
//ViewModel interplay with the datastore.viewModelScope.launch
localDataStore.saveDefaultText(defaultText)

The code proven above exhibits how the UI parts are positioned. We have now one composable factor outlined DataStorePlaygroundActivityComponent the place the textual content that’s saved is displayed on textual content view and there may be additionally motion which known as when person interplay is finished (change of the textual content in TextField element). Afterward, the ViewModel simply forwards the brand new worth to the datastore.

As quickly as the brand new worth is endured within the datastore new worth is straight away emitted and propagated to the view. Listed below are some code snippets:

//Movement information from the datastore
override val customTextData: Movement<String>
get() = App.applicationContext().dataStore.information
.map preferences ->
preferences[customTextKey] ?: CUSTOM_TEXT_SETTINGS_DEFAULT_VALUE
//Listening the the stream throughout the ViewModel
init
viewModelScope.launch
localDataStore.customTextData.gather information ->
mutableFlowData.worth = LatestDataUiState.Success(information)



//Information class for UI state
sealed class LatestDataUiState
information class Success(val tempString: String): LatestDataUiState()
information class Error(val exception: Throwable): LatestDataUiState()
//View logic
lifecycleScope.launch
repeatOnLifecycle(Lifecycle.State.STARTED)
dataStoreViewModel?.uiStateFlow?.gather uiState ->
// New worth acquired
when (uiState)
is LatestDataUiState.Success -> showSuccessUI(uiState.tempString)
is LatestDataUiState.Error -> showErrorUI(uiState.exception)



The code snipped above exhibits how the view is related with the information stream and when new UI information is acquired the re-compose is occurring.

And that is it! The code is basically small in comparison with different patterns. The total code may be discovered here.

Need to Join?If you're  I’ve developed a easy puzzle app utilizing Jetpack elements. Test it out here.

More Posts