compose-new-screen

Scaffold Jetpack Compose Screen

When to Use

When creating a new screen (e.g. Profile, Settings, OrderDetail) in a Compose-based Android app.

Instructions

1. Choose the route name and arguments. Define the route as a @Serializable data class or data object:

   @Serializable data class Profile(val userId: String)
   

2. Define the UI state as a sealed interface:

   sealed interface ProfileUiState {
       data object Loading : ProfileUiState
       data class Success(val user: User) : ProfileUiState
       data class Error(val message: String) : ProfileUiState
   }
   

3. Define intents (events from UI to ViewModel):

   sealed interface ProfileIntent {
       data object Refresh : ProfileIntent
   }
   

4. Create the ViewModel:

   @HiltViewModel
   class ProfileViewModel @Inject constructor(
       private val repo: ProfileRepository,
       savedState: SavedStateHandle,
   ) : ViewModel() {
   
       private val args = savedState.toRoute<Profile>()
   
       val state: StateFlow<ProfileUiState> = repo.observeUser(args.userId)
           .map { ProfileUiState.Success(it) as ProfileUiState }
           .catch { emit(ProfileUiState.Error(it.message ?: "Unknown")) }
           .stateIn(
               scope = viewModelScope,
               started = SharingStarted.WhileSubscribed(5_000),
               initialValue = ProfileUiState.Loading,
           )
   
       fun onIntent(intent: ProfileIntent) {
           when (intent) {
               ProfileIntent.Refresh -> viewModelScope.launch { repo.refresh(args.userId) }
           }
       }
   }
   

5. Create the stateful Route composable (requests the VM, collects state, delegates to Screen):

   @Composable
   fun ProfileRoute(vm: ProfileViewModel = hiltViewModel()) {
       val state by vm.state.collectAsStateWithLifecycle()
       ProfileScreen(state, onIntent = vm::onIntent)
   }
   

6. Create the stateless Screen composable: