Skip to content

CountryPickerBottomSheet

K M Rejowan Ahmmed edited this page May 13, 2024 · 2 revisions

CountryPickerBottomSheet

This is ModalBottomSheet Composable. It will return the selected country when an item is clicked. It doesn't have an ui that can be added as a composable (you can do that, but it's not recommended). It doesn't have any preview in the IDE (probably because of being an ExperimentalMaterial3Api).

Basic Usage

        var country by remember { mutableStateOf(selectedCountry) }
        var isPickerOpen by remember { mutableStateOf(false) }

        CountryPickerBottomSheet(
            modifier = Modifier.clip(shape = RoundedCornerShape(10.dp)),
            onDismissRequest = { isPickerOpen = false },
            onItemClicked = {
                country = it
                isPickerOpen = false
            },
            textStyle = textStyle,
            listOfCountry = countryList,
            pickerCustomization = pickerCustomization,
            itemPadding = itemPadding,
            backgroundColor = backgroundColor
        )

Demo

Shot2

Constructor

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun CountryPickerBottomSheet(
    modifier: Modifier = Modifier,
    onDismissRequest: () -> Unit,
    onItemClicked: (item: Country) -> Unit,
    textStyle: TextStyle = TextStyle(),
    listOfCountry: List<Country>,
    pickerCustomization: PickerCustomization = PickerCustomization(),
    itemPadding: Int = 10,
    backgroundColor: Color = MaterialTheme.colorScheme.surface,
)

Others

You can learn about the pickerCustomization from the Utils