Compose Cupertino

The library provides a variety of iOS-style widgets that support both light and dark modes. The following components are available:

• Buttons: CupertinoButton, CupertinoIconButton
• Date Picker: CupertinoDatePicker
• Dialogs: CupertinoDialog, CupertinoDialogNative
• Divider: CupertinoDivider
• Navigation: CupertinoNavigationBar (use CupertinoNavigationBarItem for items)
• Progress Indicator: CupertinoActivityIndicator
• Layout: CupertinoScaffold (recommended for use with top bars and navigation bars)
• Slider: CupertinoSlider
• Switch: CupertinoSwitch
• Top App Bar: CupertinoTopAppBar

You can include the various Compose Cupertino modules in your Kotlin Multiplatform project via Maven Central. Replace <version> with the desired version (e.g., 0.1.0-alpha04).

To use iOS-style components from the library, you must wrap your application's content in a CupertinoTheme composable. This provides the necessary styling and theme context for all Cupertino widgets.

@Composable
fun AppTheme(
    content: @Composable () -> Unit
) {
    CupertinoTheme(content = content)
}

To use adaptive components that switch between Material and Cupertino designs based on a target platform, you must wrap your application's theme in AdaptiveTheme. This allows you to provide specific theme configurations for both material and cupertino branches, which are then applied based on the target parameter.

@Composable
fun AppTheme(
    theme: Theme,
    content: @Composable () -> Unit
) {
    AdaptiveTheme(
        material = {
            // Tweak this for your Material design
            MaterialTheme(content = it)
        },
        cupertino = {
            // Tweak this for your iOS design
            CupertinoTheme(content = it)
        },
        target = theme,
        content = content
    )
}

Both AdaptiveIconButton and AdaptiveFilledIconButton accept an adaptation lambda. This lambda provides an AdaptationScope where you can access and modify the adaptation objects for both platforms.

Inside the scope, you can access:

• CupertinoIconButtonAdaptation: To modify colors using CupertinoButtonColors.
• MaterialIconButtonAdaptation: To modify colors using IconButtonColors (Material 3).

If you want to build your own components that automatically switch appearance based on the current platform, use the AdaptiveWidget composable. You provide two lambda blocks: material for the Android/Material design and cupertino for the iOS/Cupertino design.

@Composable
fun MyWidget() {
    AdaptiveWidget(
        material = { Text("Your Material design here") },
        cupertino = { Text("Your Cupertino design here") }
    )
}

The following components are available in the library and will automatically adapt their design based on the AdaptiveTheme target. All components support both light and dark modes.

• Buttons: AdaptiveButton, AdaptiveIconButton
• Date picker: AdaptiveDatePicker
• Dialog: AdaptiveDialog, AdaptiveDialogNative
• Divider: AdaptiveDivider
• Navigation bar: AdaptiveCupertinoNavigationBar (use AdaptiveNavigationBarItem for items)
• Progress indicator: AdaptiveCircularProgressIndicator
• Scaffold: AdaptiveScaffold (recommended for use with top bars and navigation bars)
• Slider: AdaptiveSlider
• Switch: AdaptiveSwitch
• Top app bar: AdaptiveTopAppBar

The AdaptiveFilledIconButton component provides an adaptive version of the Material FilledIconButton. It switches between a Material FilledIconButton and a CupertinoIconButton (configured with filled colors) depending on the platform.

This is the preferred component when you want a high-emphasis icon button that uses a background color.

The AdaptiveCheckbox composable provides a checkbox that automatically switches between Material 3 (Checkbox) and Cupertino (CupertinoCheckBox) styles based on the current platform or adaptation scope.

It supports standard checkbox parameters such as checked, onCheckedChange, modifier, enabled, and interactionSource. You can further customize the appearance for both platforms using the adaptation lambda, which provides access to CupertinoCheckBoxAdaptation and MaterialCheckBoxAdaptation scopes.