DOCSEARCHbyAlgolia
Submit Docs

material3-windowsizeclass-multiplatform

repository·main·Indexed 18 days ago

https://github.com/chrisbanes/material3-windowsizeclass-multiplatform

A deprecated library providing Material 3 Window Size Class support for Compose Multiplatform across Android, iOS, Desktop, and Web. It enables responsive layouts using calculateWindowSizeClass() to determine Compact, Medium, and Expanded breakpoints for width and height. Users are recommended to migrate to the official implementation released in Compose Multiplatform 1.7.0.

Tokens
1.7K
Snippets
7
Records
8
Agent score
13%

What's inside material3-windowsizeclass-multiplatform

  1. Add material3-window-size-class-multiplatform to your project

    main

    To use this library in a Compose Multiplatform project, add the dependency to your commonMain source set in your Gradle configuration.

    Note: This library uses the same package names as the AndroidX version (androidx.compose.material3.windowsizeclass) to facilitate easy migration to official support in the future.

    val commonMain by getting {
    dependencies {
        implementation("dev.chrisbanes.material3:material3-window-size-class-multiplatform:0.5.0")
    }
}

  2. Understand WindowSizeClass and its components

    main

    A WindowSizeClass is an immutable object representing the viewport's size through two dimensions: widthSizeClass and heightSizeClass.

    • widthSizeClass: A WindowWidthSizeClass representing the width-based breakpoint.
    • heightSizeClass: A WindowHeightSizeClass representing the height-based breakpoint.

    By checking these classes, you can implement responsive layouts that adapt to different device form factors (phones, tablets, foldables).

    val windowSizeClass = calculateWindowSizeClass()
val width = windowSizeClass.widthSizeClass
val height = windowSizeClass.heightSizeClass

  4. Calculate WindowSizeClass in Compose Multiplatform

    main

    You can determine the current window size class by calling calculateWindowSizeClass(). This allows you to implement responsive layouts by reacting to widthSizeClass or heightSizeClass breakpoints (Compact, Medium, or Expanded).

    Supported platforms include Android, iOS, Desktop (JVM), and Web (experimental).

    import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass

@Composable
fun MyApplication() {
    val windowSizeClass = calculateWindowSizeClass()

    // Example of how to change the font size based on the screen width
    val fontSize = when (windowSizeClass.widthSizeClass) {
        WindowWidthSizeClass.Compact -> 16.sp
        WindowWidthSizeClass.Medium -> 24.sp
        else -> 30.sp
    }

    Column( /* ... */) {
        Box (/* ... */){
            Image (/* ... */)
            Text(fontSize = fontSize)
        }
    }
}

  5. Calculate WindowSizeClass from raw size and density

    main

    If you are not using the calculateWindowSizeClass() composable, you can manually derive a WindowSizeClass from a raw Size and Density. This is useful for custom windowing logic or non-composable contexts.

    By default, this uses DefaultSizeClasses. To opt-in to all available size classes (including those that might be added in future updates), pass WindowWidthSizeClass.StandardSizeClasses and WindowHeightSizeClass.StandardSizeClasses to the supportedWidthSizeClasses and supportedHeightSizeClasses parameters respectively.

    @ExperimentalMaterial3WindowSizeClassApi
fun calculateFromSize(
    size: Size,
    density: Density,
    supportedWidthSizeClasses: Set<WindowWidthSizeClass> = WindowWidthSizeClass.DefaultSizeClasses,
    supportedHeightSizeClasses: Set<WindowHeightSizeClass> = WindowHeightSizeClass.DefaultSizeClasses,
): WindowSizeClass

  6. Calculate the WindowSizeClass in Compose

    main

    Use the calculateWindowSizeClass() composable function to obtain the current window's size classes. This function automatically returns a new WindowSizeClass whenever the window width or height crosses a breakpoint (e.g., during device rotation or window resizing).

    Note: This function is marked with @ExperimentalMaterial3WindowSizeClassApi.

    @Composable
@ExperimentalMaterial3WindowSizeClassApi
expect fun calculateWindowSizeClass(): WindowSizeClass

  7. Reference WindowWidthSizeClass breakpoints

    main

    The WindowWidthSizeClass defines three standard breakpoints for width-based responsive design:

    ClassDescription
    CompactRepresents the majority of phones in portrait.
    MediumRepresents the majority of tablets in portrait and large unfolded inner displays in portrait.
    ExpandedRepresents the majority of tablets in landscape and large unfolded inner displays in landscape.

    Use WindowWidthSizeClass.DefaultSizeClasses for the standard set of these three classes.

    val Compact = WindowWidthSizeClass(0)
val Medium = WindowWidthSizeClass(1)
val Expanded = WindowWidthSizeClass(2)
val DefaultSizeClasses = setOf(Compact, Medium, Expanded)

  8. Reference WindowHeightSizeClass breakpoints

    main

    The WindowHeightSizeClass defines three standard breakpoints for height-based responsive design:

    ClassDescription
    CompactRepresents the majority of phones in landscape.
    MediumRepresents the majority of tablets in landscape and majority of phones in portrait.
    ExpandedRepresents the majority of tablets in portrait.

    Use WindowHeightSizeClass.DefaultSizeClasses for the standard set of these three classes.

    val Compact = WindowHeightSizeClass(0)
val Medium = WindowHeightSizeClass(1)
val Expanded = WindowHeightSizeClass(2)
val DefaultSizeClasses = setOf(Compact, Medium, Expanded)