https://res.cloudinary.com/dgsreulhd/video/upload/v1786301010/main_ui_demo_rcjhan.mp4

Build truly adaptive Kotlin Multiplatform applications using a single shared UI.

KitFlow helps you create responsive layouts across Android, iOS, Desktop and Web with a simple adaptive API.

1. Installation
2. Why KitFlow
3. Adaptive.value()
4. Orientation Handling
5. Window Info
6. Adaptive Layout Decisions
7. AdaptiveFlowGrid
8. Supported Platforms

KitFlow is built around a clean, reusable adaptive layer. The mark reflects that idea: a shared core with responsive motion and layout around it.

Add Maven Central:

repositories {
    mavenCentral()
}

Add the SDK:

dependencies {
    implementation("io.github.vedangj72:kit-flow:1.0.4")
}

Use the latest version you have published.

[!IMPORTANT] Adaptive.layoutValue and AdaptiveFlowGrid are source features on this branch. The latest published Maven Central version may not include them yet.

Use AdaptiveKitProvider once near the root of your Compose app.

@Composable
fun App() {
    AdaptiveKitProvider {
        MainScreen()
    }
}

Everything inside this provider can use KitFlow APIs.

KitFlow solves the problem of keeping adaptive UI logic readable, reusable, and shared across platforms.

• Shared UI without duplicating screens for every form factor
• Responsive layout decisions that stay in one place
• Adaptive components that respond to screen size and constraints
• Orientation handling for mobile and tablet experiences
• Breakpoints that stay explicit and easy to reason about
• Better developer experience for Compose Multiplatform teams

https://res.cloudinary.com/dgsreulhd/video/upload/v1786300968/adptive_value_explination_qzdpky.mp4

Every UI value can adapt based on screen size.

Use it for:

• Padding
• Spacing
• Typography
• Card width
• Button height
• Corner radius
• Icon sizing

val previewPadding = Adaptive.value(
    sm = 12.dp,
    md = 16.dp,
    lg = 20.dp,
    tab = 24.dp,
    desktop = 28.dp
)

val previewButtonHeight = Adaptive.value(
    sm = 40.dp,
    md = 44.dp,
    lg = 48.dp,
    tab = 52.dp,
    desktop = 56.dp
)

val previewCardWidth = Adaptive.value(
    sm = 220.dp,
    md = 260.dp,
    lg = 300.dp,
    tab = 360.dp,
    desktop = 420.dp
)

val previewFontScale = Adaptive.value(
    sm = 0.92f,
    md = 0.98f,
    lg = 1.00f,
    tab = 1.06f,
    desktop = 1.12f
)

Adaptive.value() is not limited to dimensions.

It can adapt

• Dp
• Sp
• Float
• Boolean
• Int
• Colors
• Shapes
• Any custom value

This becomes the foundation for creating responsive Compose UIs.

[!NOTE] All adaptive APIs work together to produce a single responsive UI across every supported platform. Use them wisely instead of writing multiple screen implementations.

https://res.cloudinary.com/dgsreulhd/video/upload/v1786300958/orientation_android_olbjfh.mp4

https://res.cloudinary.com/dgsreulhd/video/upload/v1786300967/orientation_ios_qeoiih.mp4

Use Adaptive.onOrientationChange(...) when portrait and landscape should genuinely render different content.

Adaptive.onOrientationChange(
    portrait = {
        PortraitContent()
    },
    landscape = {
        LandscapeContent()
    }
)

KitFlow automatically renders the correct UI based on orientation, so the layout decision stays declarative and easy to follow.

Important note

For Desktop and Desktop-class layouts, KitFlow treats the layout as Landscape by default.

Orientation based adaptation is primarily intended for mobile and tablet experiences.

Read current window state with rememberWindowInfo().

val info = rememberWindowInfo()

Text("widthDp: ${info.widthDp}")
Text("heightDp: ${info.heightDp}")
Text("screenClass: ${info.screenClass}")
Text("orientation: ${info.orientation}")

Important difference:

screenClass = stable screen class based on shortest side
orientation = Portrait / Landscape / Square / Unknown

This prevents a phone from being treated like a tablet only because it rotated.

Use Adaptive.layoutValue(...) when a value should follow the current available width, including rotation, split screen, and window resizing.

val paneCount = Adaptive.layoutValue(
    sm = 1,
    md = 1,
    lg = 2,
    tab = 3,
    desktop = 4
)

Adaptive.value(...) remains shortest-side based for stable visual values; Adaptive.layoutValue(...) is width based for reflow decisions.

AdaptiveFlowGrid automatically fits equal-width columns inside its actual parent constraints. This makes reusable components respond to phones, rotation, split screen, and resizable windows without device-name checks.

import com.adaptive.kit_flow.layout.AdaptiveFlowGrid

AdaptiveFlowGrid(
    minColumnWidth = 160.dp,
    maxColumns = 3,
    horizontalSpacing = 12.dp,
    verticalSpacing = 12.dp
) {
    repeat(6) { index ->
        Card {
            Text("Item $index", Modifier.padding(16.dp))
        }
    }
}

Large system text increases the effective minimum column width by default, so the grid wraps earlier instead of squeezing text. Set fontScaleAware = false only when the content does not contain text.

The grid is eager and is intended for a small group of panels, cards, or controls. Continue using LazyVerticalGrid for long or unbounded collections.

Apply safe-area or window-inset padding outside the grid; the remaining usable width is then handled automatically. Children keep their natural height. If a parent imposes a smaller height, use scrolling, a lazy grid, or opt in to clipOverflow = true when clipped overflow is the intended behavior.

• Android
• iOS
• Desktop
• Web

KitFlow helps keep UI stable when font scale increases.

val accessibility = LocalAdaptiveAccessibilityInfo.current

Available values:

accessibility.fontScale
accessibility.fontScaleClass
accessibility.minimumTouchTarget
accessibility.reducedMotion
accessibility.highContrast
accessibility.differentiateWithoutColor

Use AdaptiveAccessibleLayout when a Row may break with large text.

AdaptiveAccessibleLayout(
    normal = {
        Row {
            Title()
            Actions()
        }
    },
    largeText = {
        Column {
            Title()
            Actions()
        }
    }
)

Use adaptiveTouchTarget() for clickable UI.

Modifier
    .adaptiveTouchTarget()
    .clickable { onClick() }

Use adaptiveSemantics() for clear labels and state.

Modifier.adaptiveSemantics(
    label = "Download file",
    role = Role.Button
)

Use AdaptiveIconButton for icon-only actions.

AdaptiveIconButton(
    icon = Icons.Default.Close,
    contentDescription = "Close",
    onClick = onClose
)

Icon-only buttons must have meaningful labels.

There are certain things to keep in mind while making layouts or components in Jetpack Compose:

• Keep the layout system in mind.
• Draw the layout on paper first when the UI has multiple states.
• Consider portrait and landscape mode, along with state changes.
• Avoid fixed size, height, and width unless the element truly requires it.
• Do not hardcode height, width, or size for responsive containers.
• Prefer aspectRatio(...), weight(...), fillMaxWidth(), widthIn(...), heightIn(...), and constraints.
• For text, use maxLines, wrapping strategy, and TextOverflow.Ellipsis where needed.
• Use vertical scroll for simple static content that may overflow.
• Use LazyColumn or LazyRow for lists.
• Review official Compose adaptive layouts and pick the correct layout strategy.
• If KitFlow fits the case, use KitFlow to keep adaptive values consistent.

Example with official window size class style:

when (windowSizeClass) {
    WindowWidthSizeClass.Compact -> {
        Column {
            LeftPanel()
            RightPanel()
        }
    }

    WindowWidthSizeClass.Medium,
    WindowWidthSizeClass.Expanded -> {
        Row {
            LeftPanel(
                modifier = Modifier.weight(1f)
            )

            RightPanel(
                modifier = Modifier.weight(1f)
            )
        }
    }
}

With KitFlow, the same idea can be kept inside your SDK-driven layout flow:

val info = rememberWindowInfo()

AdaptiveFlowGrid(
    minColumnWidth = 240.dp,
    maxColumns = 2,
    horizontalSpacing = 16.dp,
    verticalSpacing = 16.dp
) {
    Card {
        LeftPanel(modifier = Modifier.padding(16.dp))
    }

    Card {
        RightPanel(modifier = Modifier.padding(16.dp))
    }
}

KitFlow does not remove the need to understand Compose layout. It helps you arrange adaptive code in one clear flow.

Keep these official docs close while designing adaptive Compose UI:

• Support different display sizes
• Build adaptive apps
• Compose layout basics
• Adaptive do's and don'ts
• Material Design 3 in Compose

KitFlow should resolve adaptive context and adaptive values, not own the UI.

Developers keep using normal Compose components. KitFlow helps those components adapt.

What we expect from contributors:

1. Make it robust
2. Make it easy to use
3. Make component-based, platform-friendly layouts so importing and updating the codebase stays simple

Contributions should push KitFlow toward a clearer shared SDK experience, not toward platform-specific duplication.

• Adaptive.value() stays shortest-side based for stable visual values.
• Adaptive.layoutValue() follows current width for reflow decisions.
• AdaptiveFlowGrid is intended for small groups of panels, cards, or controls.
• Desktop and Desktop-class layouts are treated as Landscape by default for orientation handling.
• The detailed Compose and adaptive guidelines above are meant to stay at the end of the README so the learning path remains: install, wrap, then build.