In my opinion, one of the best refactors is extract function. Martin Fowler describe it in his book Refactoring Improving the Design of Existing Code
“You have a code fragment that can be grouped together. Turn the fragment into a method whose name explains the purpose of the method.”
void printOwing(double amount) {
printBanner();
//print details
System.out.println ("name:" + _name);
System.out.println ("amount" + amount);
}With the method extracted looks like this
void printOwing(double amount) {
printBanner();
printDetails(amount);
}
void printDetails (double amount) {
System.out.println ("name:" + _name);
System.out.println ("amount" + amount);
}The same principle can be applied to composables in Jetpack Compose. And it can be achieved easily using Gemini Bard IA.
Consider this example. It is a form for personal information.
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun PersonalInfoScreen(
) {
Surface {
Column(
modifier = Modifier.padding(16.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
Text(
text = "Enter your personal information",
style = MaterialTheme.typography.bodyLarge,
)
// Name and Last Name
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween,
) {
OutlinedTextField(
value ="",
onValueChange = { },
label = { Text("Name") },
modifier = Modifier.weight(1f),
singleLine = true,
)
OutlinedTextField(
value = "",
onValueChange = { },
label = { Text("Last Name") },
modifier = Modifier.weight(1f),
singleLine = true,
)
}
// Email
OutlinedTextField(
value = "",
onValueChange = { },
label = { Text("Email") },
modifier = Modifier.fillMaxWidth(),
singleLine = true,
)
// Nationality
OutlinedTextField(
value = "",
onValueChange = { },
label = { Text("Nationality") },
modifier = Modifier.fillMaxWidth(),
singleLine = true,
)
// Birthdate
DatePicker(
state = DatePickerState(null, null, IntRange(1900, 2030), DisplayMode.Input) ,
title = { Text("Birthdate") },
modifier = Modifier.fillMaxWidth(),
)
Button(
onClick = {},
modifier = Modifier.fillMaxWidth(),
) {
Text("Submit")
}
}
}
}It would be great if we extract each field into a Composable. This has these benefits:
- You can add a preview for each field
- You can test it individually
- You can make modifications easier
So, lets ask Bard to extract those composables
Here is the code that Bard gives me. I had to fix some errors:
@Composable
fun NameField(
modifier: Modifier = Modifier,
value: String = "",
onValueChange: (String) -> Unit,
) {
OutlinedTextField(
value = value,
onValueChange = onValueChange,
label = { Text("Name") },
modifier = modifier.fillMaxWidth(),
singleLine = true,
)
}
@Composable
fun LastNameField(
modifier: Modifier = Modifier,
value: String = "",
onValueChange: (String) -> Unit,
) {
OutlinedTextField(
value = value,
onValueChange = onValueChange,
label = { Text("Last Name") },
modifier = modifier.fillMaxWidth(),
singleLine = true,
)
}
@Composable
fun EmailField(
modifier: Modifier = Modifier,
value: String = "",
onValueChange: (String) -> Unit,
) {
OutlinedTextField(
value = value,
onValueChange = onValueChange,
label = { Text("Email") },
modifier = modifier.fillMaxWidth(),
singleLine = true,
)
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BirthdateField(
modifier: Modifier = Modifier,
birthDate: LocalDate? = null,
onBirthDateChange: (LocalDate?) -> Unit,
) {
DatePicker(
state = DatePickerState(null, null, IntRange(1900, 2030), DisplayMode.Input) ,
title = { Text("Birthdate") },
modifier = modifier.fillMaxWidth()
)
}
@Composable
fun SubmitButton(
modifier: Modifier = Modifier,
onClick: () -> Unit,
) {
Button(
onClick = onClick,
modifier = modifier.fillMaxWidth(),
) {
Text("Submit")
}
}
@Composable
fun NationalityField(
modifier: Modifier = Modifier,
value: String = "",
onValueChange: (String) -> Unit,
) {
OutlinedTextField(
value = value,
onValueChange = onValueChange,
label = { Text("Nationality") },
modifier = modifier.fillMaxWidth(),
singleLine = true,
)
}Now I asked for the original code using this new functions
@Composable
fun PersonalInfoScreen(
name: String = "",
onNameChange: (String) -> Unit,
lastName: String = "",
onLastNameChange: (String) -> Unit,
email: String = "",
onEmailChange: (String) -> Unit,
nationality: String = "",
onNationalityChange: (String) -> Unit,
birthDate: LocalDate? = null,
onBirthDateChange: (LocalDate?) -> Unit,
onSubmit: () -> Unit,
) {
Surface {
Column(
modifier = Modifier.padding(16.dp),
verticalArrangement = Arrangement.spacedBy(8.dp)
) {
Text(
text = "Enter your personal information",
style = MaterialTheme.typography.bodyLarge,
)
NameField(
value = name,
onValueChange = onNameChange,
)
LastNameField(
value = lastName,
onValueChange = onLastNameChange,
)
EmailField(
value = email,
onValueChange = onEmailChange,
)
NationalityField(
value = nationality,
onValueChange = onNationalityChange,
)
BirthdateField(
birthDate = birthDate,
onBirthDateChange = onBirthDateChange,
)
SubmitButton(
onClick = onSubmit,
)
}
}
}It looks much cleaner!
I ask for the preview and Bard give me this code
@Preview(showBackground = true)
@Composable
fun PersonalInfoScreenPreview() {
PersonalInfoScreen(
name = "Jane Doe",
lastName = "Johnson",
email = "janedoe@example.com",
nationality = "Canada",
birthDate = null,
onNameChange = { /* Handle name change here */ },
onLastNameChange = { /* Handle last name change here */ },
onEmailChange = { /* Handle email change here */ },
onNationalityChange = { /* Handle nationality change here */ },
onBirthDateChange = { /* Handle birth date change here */ },
onSubmit = { /* Handle submit action here */ },
)
}This is how it looks
