Compose Country Picker

🌍A lightweight, customizable country selection component for Compose Multiplatform applications

Features

• 🌐 Supports multiple platforms (Android, iOS, Desktop)
• 🎨 Customizable UI
• 🚀 Lightweight and efficient
• 🔍 Search functionality
• 🏳️ Includes country flags

Download

Gradle

Add the dependency below to your module's build.gradle file:

dependencies {
    implementation("io.github.androidpoet.countrypicker:$version")
}

For Kotlin Multiplatform, add the dependency below to your module's build.gradle.kts file:

sourceSets {
  val commonMain by getting {
    dependencies {
      implementation("io.github.androidpoet.countrypicker:$version")
    }
  }
}

Usage

Here's a basic example of how to use the ComposePicker in your Compose Multiplatform project:

@Composable
fun CountryPickerExample() {
  var currantCountry by remember { mutableStateOf("") }
  var isBottomSheetVisible by remember { mutableStateOf(false) }
  CountryPicker(
    onCountryChanged = {
      currantCountry = it.name + " " + it.flag + " " + it.alpha2
    },
    onDismiss = {
      isBottomSheetVisible = false
    },
    itemContent = { country, onClick ->
      // pass your own layout here
      CountryItem(
        name = country.name,
        countryCode = country.phoneCountryCode,
        flag = country.flag.toString(),
        onItemClick = onClick,
        itemBackgroundColor = Color.White,
        textColor = Color.Black,
        currencyCode = country.currencyCode.orEmpty(),
        currencySign = country.currencySign.orEmpty(),
      )
    },
    isBottomSheetVisible = isBottomSheetVisible,
  )

  Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    Column {
      Text(currantCountry, fontSize = 20.sp)

      Button(onClick = {
        isBottomSheetVisible = !isBottomSheetVisible
      }) {
        Text("Open Country Picker", fontSize = 15.sp)
      }
    }
  }
}

Customization

ComposePicker offers various customization options:

CountryPicker(
  onCountryChanged = {
    currantCountry = it.name + " " + it.flag + " " + it.alpha2
  },
  onDismiss = {
    isBottomSheetVisible = false
  },
  itemContent = { country, onClick ->
    // pass your own layout here
    CountryItem(
      name = country.name,
      countryCode = country.phoneCountryCode,
      flag = country.flag.toString(),
      onItemClick = onClick,
      itemBackgroundColor = Color.White,
      textColor = Color.Black,
      currencyCode = country.currencyCode.orEmpty(),
      currencySign = country.currencySign.orEmpty(),
    )
  },
  isBottomSheetVisible = isBottomSheetVisible,
)

Contributing

Contributions are welcome! If you've found a bug, have an idea for an improvement, or want to contribute new features, please open an issue or submit a pull request.

Find this repository useful? ❤️

Support it by joining stargazers for this repository. ⭐
Also, follow me on GitHub for my next creations! 🤩

License

Designed and developed by AndroidPoet (Ranbir Singh)

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.