{"id":13659649,"url":"https://github.com/Lavmee/constraintlayout-compose-multiplatform","last_synced_at":"2025-04-24T15:30:35.768Z","repository":{"id":204917242,"uuid":"711725142","full_name":"Lavmee/constraintlayout-compose-multiplatform","owner":"Lavmee","description":"Useful when implementing larger layouts with more complicated alignment requirements.","archived":false,"fork":false,"pushed_at":"2025-04-18T23:55:52.000Z","size":1172,"stargazers_count":221,"open_issues_count":9,"forks_count":5,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-23T09:02:27.035Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Kotlin","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Lavmee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-10-30T03:33:13.000Z","updated_at":"2025-04-23T07:51:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"4ff869b6-7251-4bcc-a9c1-b9b7dcb72112","html_url":"https://github.com/Lavmee/constraintlayout-compose-multiplatform","commit_stats":null,"previous_names":["lavmee/constraintlayout-compose-multiplatform"],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lavmee%2Fconstraintlayout-compose-multiplatform","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lavmee%2Fconstraintlayout-compose-multiplatform/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lavmee%2Fconstraintlayout-compose-multiplatform/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Lavmee%2Fconstraintlayout-compose-multiplatform/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Lavmee","download_url":"https://codeload.github.com/Lavmee/constraintlayout-compose-multiplatform/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250654084,"owners_count":21465811,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T05:01:10.899Z","updated_at":"2025-04-24T15:30:35.762Z","avatar_url":"https://github.com/Lavmee.png","language":"Kotlin","funding_links":[],"categories":["Libraries"],"sub_categories":["🍎 Compose UI"],"readme":"[![Maven Central](https://img.shields.io/maven-central/v/tech.annexflow.compose/constraintlayout-compose-multiplatform)](https://search.maven.org/search?q=g:tech.annexflow.compose)\n![license](https://img.shields.io/github/license/Lavmee/constraintlayout-compose-multiplatform)\n\n![badge-Android](https://img.shields.io/badge/Platform-Android-brightgreen)\n![badge-iOS](https://img.shields.io/badge/Platform-iOS-lightgray)\n![badge-JVM](https://img.shields.io/badge/Platform-JVM-orange)\n![badge-macOS](https://img.shields.io/badge/Platform-macOS-purple)\n\n## Compose Multiplatform: ConstraintLayout\n\n[ConstraintLayout](https://developer.android.com/jetpack/compose/layouts/constraintlayout) is a layout that allows you to place composables relative to other composables on the screen. It is an alternative to using multiple nested Row, Column, Box and other custom layout elements. ConstraintLayout is useful when implementing larger layouts with more complicated alignment requirements.\n\nConsider using ConstraintLayout in the following scenarios:\n\n- To avoid nesting multiple Columns and Rows for positioning elements on screen to improve readability of code.\n- To position composables relative to other composables or to position composables based on guidelines, barriers or chains.\nIn the View system, ConstraintLayout was the recommended way to create large and complex layouts, as a flat view hierarchy was better for performance than nested views are. However, this is not a concern in Compose, which is able to efficiently handle deep layout hierarchies.\n\nThe `androidx.constraintlayout:constraintlayout-compose` library is available for Jetpack Compose, but it is not currently available for Compose Multiplatform. This library changes that, by providing the [ConstraintLayout](https://developer.android.com/reference/kotlin/androidx/constraintlayout/compose/package-summary) for many of the platforms supported by Compose Multiplatform.\n\n| Platform      | Supported         |\n|---------------|-------------------|\n| Android       | ✅                |\n| iOS           | ✅                |\n| Desktop (JVM) | ✅                |\n| Desktop (Mac) | ✅ (experimental) |\n| Web           | ✅ (experimental) |\n\n## Usage\n\nUsage is very simple:\n\n```kotlin\nimport androidx.constraintlayout.compose.ConstraintLayout\n\n@Composable\nfun ConstraintLayoutContent() {\n    ConstraintLayout {\n        // Create references for the composables to constrain\n        val (button, text) = createRefs()\n\n        Button(\n            onClick = { /* Do something */ },\n            // Assign reference \"button\" to the Button composable\n            // and constrain it to the top of the ConstraintLayout\n            modifier = Modifier.constrainAs(button) {\n                top.linkTo(parent.top, margin = 16.dp)\n            }\n        ) {\n            Text(\"Button\")\n        }\n\n        // Assign reference \"text\" to the Text composable\n        // and constrain it to the bottom of the Button composable\n        Text(\n            \"Text\",\n            Modifier.constrainAs(text) {\n                top.linkTo(button.bottom, margin = 16.dp)\n            }\n        )\n    }\n}\n```\n\nYou'll note that I have kept the package name the same as that in AndroidX. This is to enable easy migration for when support is added to Compose Multiplatform.\n\n## Download\n\n[![Maven Central](https://img.shields.io/maven-central/v/tech.annexflow.compose/constraintlayout-compose-multiplatform)](https://central.sonatype.com/namespace/tech.annexflow.compose)\n\n```kotlin\nval commonMain by getting {\n    dependencies {\n        /// Compose 1.7.3\n        implementation(\"tech.annexflow.compose:constraintlayout-compose-multiplatform:0.5.1\")\n        /// Compose 1.7.3 with different tech.annexflow.constraintlayout.core package\n        implementation(\"tech.annexflow.compose:constraintlayout-compose-multiplatform:0.5.1-shaded-core\")\n        /// Compose 1.7.3 with different tech.annexflow.constraintlayout package\n        implementation(\"tech.annexflow.compose:constraintlayout-compose-multiplatform:0.5.1-shaded\")\n    }\n}\n```\n\n## Credits\nThanks to Chris Banes for the initial structure of the project.\n\n## License\n\n```\nCopyright 2022 The Android Open Source Project\nPortions 2023 Sergei Gagarin\n \nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    https://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLavmee%2Fconstraintlayout-compose-multiplatform","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLavmee%2Fconstraintlayout-compose-multiplatform","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLavmee%2Fconstraintlayout-compose-multiplatform/lists"}