{"id":15623253,"url":"https://github.com/skydoves/flexiblebottomsheet","last_synced_at":"2026-01-08T04:18:50.401Z","repository":{"id":209807924,"uuid":"724970183","full_name":"skydoves/FlexibleBottomSheet","owner":"skydoves","description":"🐬 Advanced Compose Multiplatform bottom sheet for segmented sizing, non-modal type, and allows interaction behind the bottom sheet similar to Google Maps.","archived":false,"fork":false,"pushed_at":"2025-01-21T00:43:15.000Z","size":19699,"stargazers_count":884,"open_issues_count":24,"forks_count":41,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-14T05:56:19.945Z","etag":null,"topics":["android","animation","bottomsheet","jetpack-compose","modal","modal-bottom-sheets","skydoves"],"latest_commit_sha":null,"homepage":"","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/skydoves.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"skydoves","custom":["https://www.paypal.me/skydoves","https://www.buymeacoffee.com/skydoves"]}},"created_at":"2023-11-29T06:57:18.000Z","updated_at":"2025-04-12T21:06:40.000Z","dependencies_parsed_at":"2024-01-16T23:31:35.462Z","dependency_job_id":"f9c3c712-3458-4fa7-b8ff-84b3e2c00ec1","html_url":"https://github.com/skydoves/FlexibleBottomSheet","commit_stats":null,"previous_names":["skydoves/flexiblebottomsheet"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydoves%2FFlexibleBottomSheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydoves%2FFlexibleBottomSheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydoves%2FFlexibleBottomSheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/skydoves%2FFlexibleBottomSheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/skydoves","download_url":"https://codeload.github.com/skydoves/FlexibleBottomSheet/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254270646,"owners_count":22042859,"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":["android","animation","bottomsheet","jetpack-compose","modal","modal-bottom-sheets","skydoves"],"created_at":"2024-10-03T09:56:55.044Z","updated_at":"2026-01-08T04:18:50.395Z","avatar_url":"https://github.com/skydoves.png","language":"Kotlin","funding_links":["https://github.com/sponsors/skydoves","https://www.paypal.me/skydoves","https://www.buymeacoffee.com/skydoves"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eFlexibleBottomSheet\u003c/h1\u003e\u003c/br\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://opensource.org/licenses/Apache-2.0\"\u003e\u003cimg alt=\"License\" src=\"https://img.shields.io/badge/License-Apache%202.0-blue.svg\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://android-arsenal.com/api?level=21\"\u003e\u003cimg alt=\"API\" src=\"https://img.shields.io/badge/API-21%2B-brightgreen.svg?style=flat\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/skydoves/FlexibleBottomSheet/actions/workflows/android.yml\"\u003e\u003cimg alt=\"Build Status\" \n  src=\"https://github.com/skydoves/FlexibleBottomSheet/actions/workflows/android.yml/badge.svg\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://androidweekly.net/issues/issue-599\"\u003e\u003cimg alt=\"Android Weekly\" src=\"https://skydoves.github.io/badges/android-weekly.svg\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/skydoves\"\u003e\u003cimg alt=\"Profile\" src=\"https://skydoves.github.io/badges/skydoves.svg\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n🐬 FlexibleBottomSheet is an advanced Compose Multiplatform bottom sheet for segmented sizing, non-modal type, and allows interaction behind the bottom sheet similar to Google Maps. It also offers additional conveniences, including specifying sheet sizes, monitoring sheet states, and more customization.\n\u003c/p\u003e\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"previews/preview0.png\" width=\"270\"/\u003e\n\u003cimg src=\"previews/preview1.png\" width=\"270\"/\u003e\n\u003cimg src=\"previews/preview2.png\" width=\"270\"/\u003e\n\u003c/p\u003e\n\n## Download\n[![Maven Central](https://img.shields.io/maven-central/v/com.github.skydoves/flexible-core.svg?label=Maven%20Central)](https://search.maven.org/search?q=g:%22com.github.skydoves%22%20AND%20a:%22flexible-core%22)\n\n### Gradle\n\nAdd the dependency below to your **module**'s `build.gradle` file:\n\n```gradle\ndependencies {\n    // compose material\n    implementation(\"com.github.skydoves:flexible-bottomsheet-material:0.2.0\")\n\n    // compose material3\n    implementation(\"com.github.skydoves:flexible-bottomsheet-material3:0.2.0\")\n}\n```\n\nFor Kotlin Multiplatform, add the dependency below to your **module**'s `build.gradle.kts` file:\n\n```gradle\nsourceSets {\n    val commonMain by getting {\n        dependencies {\n            // compose material\n            implementation(\"com.github.skydoves:flexible-bottomsheet-material:$version\")\n            \n            // compose material3\n            implementation(\"com.github.skydoves:flexible-bottomsheet-material3:$version\")\n        }\n    }\n}\n```\n\n## Usage\n\nYou can implement a flexible bottom sheet with `FlexibleBottomSheet`, similar to the `ModalBottomSheet` provided by [Compose Material 3](https://developer.android.com/jetpack/androidx/releases/compose-material3). Essentially, you can achieve the same behavior as `ModalBottomSheet` by not altering any properties.\n\n### FlexibleBottomSheet\n\n\u003cimg src=\"previews/preview3.gif\" width=\"280px\" align=\"right\"\u003e\n\nThis is a basic example of the `FlexibleBottomSheet`, which is modal, allowing customized sheet sizes for each expanded status, and offers three different expanded statuses (fully, intermediately, slightly):\n\n```kotlin\nFlexibleBottomSheet(\n  onDismissRequest = onDismissRequest,\n  sheetState = rememberFlexibleBottomSheetState(\n    flexibleSheetSize = FlexibleSheetSize(\n      fullyExpanded = 0.9f,\n      intermediatelyExpanded = 0.5f,\n      slightlyExpanded = 0.15f,\n    ),\n    isModal = true,\n    skipSlightlyExpanded = false,\n  ),\n  containerColor = Color.Black,\n) {\n  Text(\n    modifier = Modifier\n      .fillMaxWidth()\n      .padding(8.dp),\n    text = \"This is Flexible Bottom Sheet\",\n    textAlign = TextAlign.Center,\n    color = Color.White,\n  )\n}\n```\n\n### FlexibleBottomSheetState\n\n`FlexibleBottomSheetState` is a crucial concept that must be bound to `FlexibleBottomSheet` to manage its state changes. It also enables you to customize UI/UX behaviors for the bottom sheet and take manual control over expanding/hiding the bottom sheet. You can remember the `FlexibleBottomSheetState` by using `rememberFlexibleBottomSheetState` as demonstrated in the example below:\n\n```kotlin\nFlexibleBottomSheet(\n  onDismissRequest = onDismissRequest,\n  sheetState = rememberFlexibleBottomSheetState(\n    skipSlightlyExpanded = false,\n    skipIntermediatelyExpanded = false,\n    isModal = true,\n    allowNestedScroll = true,\n    flexibleSheetSize = FlexibleSheetSize(\n      fullyExpanded = 1.0f,\n      intermediatelyExpanded = 0.5f,\n      slightlyExpanded = 0.25f\n    )\n  ),\n) {\n  ..\n}\n```\n\nYou can expand or hide the bottom sheet manually by utilizing the `FlexibleBottomSheetState` like the code below:\n\n\u003cimg src=\"previews/preview4.gif\" width=\"300px\" align=\"right\"\u003e\n\n```kotlin\nval scope = rememberCoroutineScope()\nval sheetState = rememberFlexibleBottomSheetState(\n  flexibleSheetSize = FlexibleSheetSize(fullyExpanded = 0.9f),\n  isModal = true,\n  skipSlightlyExpanded = false,\n)\n\nFlexibleBottomSheet(\n  sheetState = sheetState,\n  containerColor = Color.Black,\n  onDismissRequest = onDismissRequest\n) {\n  Button(\n    modifier = Modifier.align(Alignment.CenterHorizontally),\n    onClick = {\n      scope.launch {\n        when (sheetState.swipeableState.currentValue) {\n          FlexibleSheetValue.SlightlyExpanded -\u003e sheetState.intermediatelyExpand()\n          FlexibleSheetValue.IntermediatelyExpanded -\u003e sheetState.fullyExpand()\n          else -\u003e sheetState.hide()\n        }\n      }\n    },\n  ) {\n    Text(text = \"Expand Or Hide\")\n  }\n}\n```\n\n### BottomSheet Expanded Status\n\nThe flexible bottom sheet offers four primary sheet statuses known as `FlexibleValues`:\n\n- **Fully Expanded**: The sheet is visible at its fully-expanded height. This is mandatory and cannot be skipped.\n- **Intermediately Expanded**: The sheet is visible at an intermediate expanded height. This can be skipped by setting `skipIntermediatelyExpanded` to `true`.\n- **Slightly Expanded**: The sheet is visible at a slightly expanded height. This is skipped by default but can be enabled by setting `skipSlightlyExpanded` to `false`.\n- **Hidden**: The sheet is completely not visible on the screen. If you never want to dismiss and keep displaying the bottom sheet, you can give `skipHiddenState` to `true`.\n\nYou have the option to skip the **Intermediately Expanded** and **Slightly Expanded** states, as demonstrated below:\n\n```kotlin\nFlexibleBottomSheet(\n  onDismissRequest = onDismissRequest,\n  sheetState = rememberFlexibleBottomSheetState(\n    skipSlightlyExpanded = false,\n    skipIntermediatelyExpanded = false\n  ),\n) {\n  ..\n}\n```\n\n### Initial Value\n\nYou can specify the initial expanded state when the bottom sheet first appears by using the `initialValue` parameter. This allows you to start the sheet at a specific state (e.g., `FullyExpanded`, `IntermediatelyExpanded`, or `SlightlyExpanded`) without animation:\n\n```kotlin\nFlexibleBottomSheet(\n  onDismissRequest = onDismissRequest,\n  sheetState = rememberFlexibleBottomSheetState(\n    initialValue = FlexibleSheetValue.FullyExpanded,\n    skipSlightlyExpanded = false,\n  ),\n) {\n  ..\n}\n```\n\n\u003e **Note**: The `initialValue` must be compatible with the skip settings. For example, if `skipSlightlyExpanded = true`, you cannot set `initialValue = FlexibleSheetValue.SlightlyExpanded`.\n\n### Expanded Sizes\n\n**FlexibleBottomSheet** offers you to customize the expanded size the content size of bottom sheet based on its states. These constraints are calculated by multiplying the ratio with the maximum display height excluding the systembars (status and navigation bars). You can simply customize the expanded sheet size by setting `FlexibleSheetSize` to the `rememberFlexibleBottomSheetState` like the code below:\n\n```kotlin\nFlexibleBottomSheet(\n  onDismissRequest = onDismissRequest,\n  sheetState = rememberFlexibleBottomSheetState(\n    flexibleSheetSize = FlexibleSheetSize(\n      fullyExpanded = 0.85f,\n      intermediatelyExpanded = 0.45f,\n      slightlyExpanded = 0.15f,\n    ),\n  )\n) {\n  ..\n}\n```\n\nFully (0.85) | Intermediately (0.45) | Slightly (0.15) |\n| :---------------: | :---------------: | :---------------: |\n| \u003cimg src=\"previews/preview5.png\" align=\"center\" width=\"320px\" height =\"480px\"/\u003e | \u003cimg src=\"previews/preview6.png\" align=\"center\" width=\"320px\" height =\"480px\"/\u003e | \u003cimg src=\"previews/preview7.png\" align=\"center\" width=\"320px\" height =\"480px\"/\u003e |\n\n### Wrap Content Size\n\nInstead of using fixed ratios, you can make the bottom sheet size itself based on its content height by using `FlexibleSheetSize.WrapContent`. This is useful when you want the sheet to automatically fit its content:\n\n```kotlin\nFlexibleBottomSheet(\n  onDismissRequest = onDismissRequest,\n  sheetState = rememberFlexibleBottomSheetState(\n    flexibleSheetSize = FlexibleSheetSize(\n      fullyExpanded = FlexibleSheetSize.WrapContent,\n      intermediatelyExpanded = 0.5f,\n      slightlyExpanded = 0.15f,\n    ),\n  )\n) {\n  // The sheet will wrap this content when fully expanded\n  Column {\n    Text(\"Item 1\")\n    Text(\"Item 2\")\n    Text(\"Item 3\")\n  }\n}\n```\n\nYou can use `WrapContent` for any of the expanded states. When the content is smaller than the screen, the sheet will size itself to fit the content. When the content is larger, it will be constrained to the screen height.\n\n### Non-Modal BottomSheet\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"previews/preview0.png\" width=\"270\"/\u003e\n\u003cimg src=\"previews/preview1.png\" width=\"270\"/\u003e\n\u003cimg src=\"previews/preview2.png\" width=\"270\"/\u003e\n\u003c/p\u003e\n\nIf you need to interact outside of the bottom sheet while the sheet is displayed on the screen, similar to the Google Maps style, you can easily achieve this by setting the `isModal` as **false** property for the `FlexibleBottomSheet` composable, as shown below:\n\n```kotlin\nFlexibleBottomSheet(\n  onDismissRequest = onDismissRequest,\n  sheetState = rememberFlexibleBottomSheetState(\n    isModal = false,\n    skipSlightlyExpanded = false,\n  ),\n) {\n  ..\n}\n```\n\nYou will see the result below:\n\n\u003cimg src=\"previews/preview10.gif\" width=\"320px\"\u003e\n\n### Dynamic Content By Monitoring Value Changes\n\nYou can dynamically compose your bottom sheet content by tracking the bottom sheet state changes. The sample code below demonstrates how you can easily observe the sheet state and adjust the text size accordingly:\n\n\u003cimg src=\"previews/preview8.gif\" width=\"290px\" align=\"right\"\u003e\n\n```kotlin\nvar currentSheetTarget by remember { \n  mutableStateOf(FlexibleSheetValue.IntermediatelyExpanded) \n}\n\nFlexibleBottomSheet(\n  onDismissRequest = onDismissRequest,\n  sheetState = rememberFlexibleBottomSheetState(\n    skipSlightlyExpanded = false\n  ),\n  onTargetChanges = { sheetValue -\u003e\n    currentSheetTarget = sheetValue\n  },\n  containerColor = Color.Black,\n) {\n  Text(\n    modifier = Modifier\n      .fillMaxWidth()\n      .padding(8.dp),\n    text = \"This is Flexible Bottom Sheet\",\n    textAlign = TextAlign.Center,\n    color = Color.White,\n    fontSize = when (currentSheetTarget) {\n      FlexibleSheetValue.FullyExpanded -\u003e 28.sp\n      FlexibleSheetValue.IntermediatelyExpanded -\u003e 20.sp\n      else -\u003e 12.sp\n    },\n  )\n}\n```\n\nYou can also implement dynamical content by utilizing with Compose animation library [Orbital](https://github.com/skydoves/Orbital).\n\n\u003cimg src=\"previews/preview9.gif\" width=\"320px\" align=\"cemter\"\u003e\n\n\n### Nested Scroll\n\n`FlexibleBottomSheet` inherently supports nested scrolling, allowing seamless integration with components like `LazyColumn`, `LazyRow`, and others. However, if you wish to disable nested scrolling, you can achieve this by setting `allowNestedScroll` to `false` within the `rememberFlexibleBottomSheetState`.\n\n```kotlin\nFlexibleBottomSheet(\n  onDismissRequest = onDismissRequest,\n  sheetState = rememberFlexibleBottomSheetState(\n    allowNestedScroll = false\n  ),\n) {\n  ..\n}\n```\n\nYou will see the difference below:\n\nEnabled | Disabled |\n| :---------------: | :---------------: |\n| \u003cimg src=\"previews/preview11.gif\" align=\"center\" width=\"100%\"/\u003e | \u003cimg src=\"previews/preview12.gif\" align=\"center\" width=\"100%\"/\u003e |\n\n## Find this repository useful? :heart:\nSupport it by joining __[stargazers](https://github.com/skydoves/FlexibleBottomSheet/stargazers)__ for this repository. :star: \u003cbr\u003e\nAlso, __[follow me](https://github.com/skydoves)__ on GitHub for my next creations! 🤩\n\n# License\n```xml\nDesigned and developed by 2023 skydoves (Jaewoong Eum)\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   http://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%2Fskydoves%2Fflexiblebottomsheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fskydoves%2Fflexiblebottomsheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fskydoves%2Fflexiblebottomsheet/lists"}