Jetpack Compose State Management for Composable’s Screen made Simple.
Hello guys,😀
Please proceed to the first day for Introduction to Compose & Setup 🏗️ if you have not yet setup a Basic Compose project.
We already are aware, Jetpack Compose is now considered as a Future of Android and modern Toolkit for building Native UI. The main feature is, it bring your app to life with less code, powerful tools and lot more. Many Companies have already started adopting it or migrating their old stuff in Compose.
In Jetpack Compose you will find many approaches to manage State in Jetpack Compose for Composable screen over Web. Everyone has a different thought process to manage state for Composable Screens with their own implementation. I have referred a JetNews sample project thought process which made the state management easy while developing Composable screens. Let’s discuss with the help of example of one screen which is seen in 99 % of apps, On Boarding flow-(OTP Verification)
This is how Screen looks like with one OutlinedTextField, Button, CircularProgressIndicator , Error View for our sample.
How this will work ?
- Enter Mobile Number
- Enable Send OTP Button after correct Mobile Number
- Simulate the Loading of Sending OTP behavior
- Simulate the Sending OTP Failed behavior
- Simulate the Sending OTP Success behavior
Note : We have used ViewModel for handling the Business Logic of Composable Screen and passing VM object to composable (We have not covered how to Setup Compose project with MVVM etc in this Article)
Possible States for SendOtp Screen & its Representation 👇
- Initial State (user observes only OutlinedTextField changes when entering Phone Number)
- Enable Send Otp Button State (when correct 10 digit phone number entered)
- Sending Otp State (when user press the SendOtp button)
- Sending Otp Failed State (when any error occurs due to any circumstance)
- Sending Otp Success State (when otp is sent successfully)
Based on the Api Response (Loading, Success, Failure) from VM we will derive more Concrete UI State for our composable screen 👇
Consider Api FailedState example working👇
Our Expectations in Failed state is Button should be disabled, loading state should not be displayed, error state should be displayed, success block should not be displayed. This is how simply managed by SendOtpUiState class 😀
ViewModel code for simulating behavior and Business Logic 👇
That’s all about the basics of State Management in Compose. This article may not cover everything based on your complex Implementation & use cases but you are good to start with. All the best.😃
You can Clone this repository for basic setup. Further, all concepts source code can be updated from same. (Switch to branch StateManagementOfCompose) for this implementation.
https://github.com/SatyamGondhale/LearnCompose
If you think this has helped you, feel free to 👏🏻 (claps) & share. Thanks.😄
