2-Manner Drift The use of Jetpack Compose and Datastore | via Kliment Joncheski | Apr, 2022

use MVVM to your Android tasks

I simply began enjoying round with the Jetpack Compose APIs and the datastore and I to find it truly at hand to make use of.

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

We’ll be the use of MVVM as structure for our little challenge, the use of Jetpack compose library and Datastore library. Coroutines is available in right here as herbal phase. Let’s get started!

That is what our demo app will seem like:

Our major structure seems like this:

We see how our 2 means go with the flow seems like. At the left facet, we’ve got the view the place on person interplay the knowledge is modified, then the ViewModel forwards this modified information to the datastore and there the brand new information its continued.

Once the knowledge is continued to the Datastore it emits a brand new information go with the flow and that is forwarded again to the View and UI may also be up to date. That is truly easy resolution and there is not any want for boilerplate code for subscribing/staring at/binding perspectives with ViewModels.

The UI chances are high that prompted with each emit at the go with the flow information. And that is prompted with each UI trade adopted via Datastore possibilities.

//Composable UI component that handles onTextChangeAction
@Composable
a laugh DataStorePlaygroundActivityComponent(
stringData: String,
keyboardController: SoftwareKeyboardController?,
onTextChangeAction: (dataString: String) -> Unit
) {
val textAnswerState = take into account {
mutableStateOf("")
}
JetPackPlaygroundAppTheme {
Floor(colour = MaterialTheme.colours.background) {
Column(Modifier.fillMaxSize()) {
Name("DataStore Playground")
Spacer(modifier = Modifier.top(16.dp))
NormalText("Knowledge: $stringData")
Spacer(modifier = Modifier.top(32.dp))
TextFieldSingleLine(
textAnswerState,
"input settings textual content",
keyboardController,
onTextChangeAction
)
}
}
}
}//Process|Fragment view environment the composable
DataStorePlaygroundActivityComponent(
stringData,
LocalSoftwareKeyboardController.present
) { dataString ->
dataStoreViewModel?.saveDefaultText(dataString)
}//ViewModel interplay with the datastore.viewModelScope.release {
localDataStore.saveDefaultText(defaultText)
}

The code proven above presentations how the UI parts are positioned. Now we have one composable component outlined DataStorePlaygroundActivityComponent the place the textual content this is stored is displayed on textual content view and there may be motion which is known as when person interplay is completed (trade of the textual content in TextField element). In a while, the ViewModel simply forwards the brand new price to the datastore.

Once the brand new price is continued within the datastore new price is instantly emitted and propagated to the view. Listed below are some code snippets:

//Drift information from the datastore
override val customTextData: Drift<String>
get() = App.applicationContext().dataStore.information
.map { personal tastes ->
personal tastes[customTextKey] ?: CUSTOM_TEXT_SETTINGS_DEFAULT_VALUE
}//Listening the the go with the flow throughout the ViewModel
init {
viewModelScope.release {
localDataStore.customTextData.accumulate { information ->
mutableFlowData.price = LatestDataUiState.Luck(information)
}
}
}
//Knowledge magnificence for UI state
sealed magnificence LatestDataUiState {
information magnificence Luck(val tempString: String): LatestDataUiState()
information magnificence Error(val exception: Throwable): LatestDataUiState()
}//View common sense
lifecycleScope.release {
repeatOnLifecycle(Lifecycle.State.STARTED) {
dataStoreViewModel?.uiStateFlow?.accumulate { uiState ->
// New price gained
when (uiState) {
is LatestDataUiState.Luck -> showSuccessUI(uiState.tempString)
is LatestDataUiState.Error -> showErrorUI(uiState.exception)
}
}
}
}

The code snipped above presentations how the view is attached with the knowledge go with the flow and when new UI information is gained the re-compose is occurring.

And that’s the reason it! The code is truly small in comparison to different patterns. The total code may also be discovered right here.

Wish to Attach?If you have an interest I’ve advanced a easy puzzle app the use of Jetpack parts. Test it out right here.