fun CountrySelector(country: Country, onSelection: (Country) -> Unit, pickerRowContent: @Composable (Country) -> Unit = { defaultCountry ->
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
Image(
painter = painterResource(resource = defaultCountry.flagImageResource),
contentDescription = defaultCountry.countryName,
modifier = Modifier
.size(24.dp)
.clip(CircleShape)
)
Text(defaultCountry.internationalDialCode)
}
}, searchBarContent: @Composable (searchQuery: String, onQueryChange: (String) -> Unit, hasError: Boolean) -> Unit = { searchQuery, onQueryChange, hasError ->
TextField(
value = searchQuery,
onValueChange = onQueryChange,
modifier = Modifier.fillMaxWidth(),
label = { Text("Search") },
leadingIcon = {
Icon(
imageVector = Icons.Default.Search,
contentDescription = "Search countries"
)
},
isError = hasError,
placeholder = { Text("Enter country name or code") }
)
}) Composable function that displays a country picker button with customizable content.
This function shows a clickable row with user-defined content for the selected country (e.g., flag, dial code, country name). When clicked, it opens a modal bottom sheet where users can select a country.
The selected country is passed to the onSelection callback, and the content inside the picker can be customized using the pickerRowContent composable lambda.
Parameters
The currently selected Country to be displayed in the button.
Callback invoked when a country is selected from the bottom sheet. Receives the selected Country as a parameter.
A composable lambda that defines how each country should be displayed. It is used both for displaying the selected country and for listing countries in the bottom sheet. Defaults to showing the flag and international dialing code.