{"id":32300312,"url":"https://github.com/shirvanie/flutter_sliding_box","last_synced_at":"2026-02-19T21:53:14.371Z","repository":{"id":173193684,"uuid":"650365538","full_name":"shirvanie/flutter_sliding_box","owner":"shirvanie","description":"A draggable flutter widget that makes it easier to use a SlidingBox panel for all platform. Boxes can be customized with your content and placed in your app.","archived":false,"fork":false,"pushed_at":"2023-11-18T15:36:04.000Z","size":72397,"stargazers_count":3,"open_issues_count":1,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-11-19T14:41:41.288Z","etag":null,"topics":["dart","dartlang","flutter","flutter-package","flutter-packages","flutter-ui","flutter-widget","library"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/flutter_sliding_box","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shirvanie.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-06-06T23:21:30.000Z","updated_at":"2023-11-19T14:41:41.289Z","dependencies_parsed_at":"2023-11-17T14:47:06.416Z","dependency_job_id":null,"html_url":"https://github.com/shirvanie/flutter_sliding_box","commit_stats":null,"previous_names":["shirvanie/flutter_sliding_box"],"tags_count":12,"template":null,"template_full_name":null,"purl":"pkg:github/shirvanie/flutter_sliding_box","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shirvanie%2Fflutter_sliding_box","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shirvanie%2Fflutter_sliding_box/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shirvanie%2Fflutter_sliding_box/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shirvanie%2Fflutter_sliding_box/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shirvanie","download_url":"https://codeload.github.com/shirvanie/flutter_sliding_box/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shirvanie%2Fflutter_sliding_box/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29634417,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T18:02:07.722Z","status":"ssl_error","status_checked_at":"2026-02-19T18:01:46.144Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["dart","dartlang","flutter","flutter-package","flutter-packages","flutter-ui","flutter-widget","library"],"created_at":"2025-10-23T05:15:32.424Z","updated_at":"2026-02-19T21:53:14.364Z","avatar_url":"https://github.com/shirvanie.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SlidingBox for Flutter\n\n\u003cimg alt=\"Flutter SlidingBox Plugin\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/cover.png\"/\u003e\n\n[![pub package](https://img.shields.io/pub/v/flutter_sliding_box.svg)](https://pub.dartlang.org/packages/flutter_sliding_box)\n[![likes](https://img.shields.io/pub/likes/flutter_sliding_box?logo=flutter)](https://pub.dev/packages/flutter_sliding_box/score)\n[![GitHub Stars](https://img.shields.io/github/stars/shirvanie/flutter_sliding_box.svg?logo=github)](https://github.com/shirvanie/flutter_sliding_box/stargazers)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/shirvanie/flutter_sliding_box/blob/master/LICENSE)\n[![points](https://img.shields.io/pub/points/flutter_sliding_box)](https://pub.dev/packages/flutter_sliding_box/score)\n[![popularity](https://img.shields.io/pub/popularity/flutter_sliding_box)](https://pub.dev/packages/flutter_sliding_box/score)\n[![Platform](https://img.shields.io/badge/platform-all-brightgreen.svg)](https://img.shields.io/badge/platform-android%20|%20ios%20|%20linux%20|%20macos%20|%20web%20|%20windows-green.svg)\n\nA draggable flutter widget (like bottom sheet panel) that makes it easier to use a SlidingBox for all platform.\nBoxes can be customized with your content and placed in your app.\n\n\u003cbr\u003e\n\nTo see example of the following SlidingBox on a device or simulator:\n```bash\ncd example/\nflutter run --release\n```\n\n## Demo\n\n\u003cp\u003e\n    \u003cimg width=\"160px\" alt=\"Messenger application\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/demo_light_open.png\"/\u003e\n    \u003cimg width=\"160px\" alt=\"Messenger application \" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/demo_light_close.png\"/\u003e\n    \u003cimg width=\"160px\" alt=\"Simple SlidingBox\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/demo_simple.png\"/\u003e\n    \u003cimg width=\"160px\" alt=\"SearchBox\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/demo_search.png\"/\u003e\n\u003c/p\u003e\n\n### Simple\n\n| Light                                                                                                                                                                                    | Dark                                                                                                                                                                                   |\n|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| \u003cimg width=\"150px\" alt=\"Simple Light\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/main_light.GIF\" style=\"box-shadow: 0px 0px 7px #cccccc;\"/\u003e | \u003cimg width=\"150px\" alt=\"Simple Dark\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/main_dark.GIF\" style=\"box-shadow: 0px 0px 7px #cccccc;\"/\u003e |\n\nSource Link:\n\u003ca alt=\"Simple SlidingBox\" style=\"display:inline-block;\" href=\"https://github.com/shirvanie/flutter_sliding_box/blob/master/example/lib/main.dart\"\u003e\nexample/lib/main.dart\n\u003c/a\u003e\n\n### Map\n\n| Light                                                                                                                                                                                | Dark                                                                                                                                                                               |\n|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| \u003cimg width=\"150px\" alt=\"Map Light\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/map_light.GIF\" style=\"box-shadow: 0px 0px 7px #cccccc;\"/\u003e | \u003cimg width=\"150px\" alt=\"Map Dark\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/map_dark.GIF\" style=\"box-shadow: 0px 0px 7px #cccccc;\"/\u003e |\n\nSource Link:\n\u003ca alt=\"Map\" href=\"https://github.com/shirvanie/flutter_sliding_box/blob/master/example/lib/map_screen.dart\"\u003e\nexample/lib/map_screen.dart\n\u003c/a\u003e\n\n### Music player\n\n| Light                                                                                                                                                                                                  | Dark                                                                                                                                                                                                 |\n|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| \u003cimg width=\"150px\" alt=\"Music Player Light\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/music_player_light.GIF\" style=\"box-shadow: 0px 0px 7px #cccccc;\"/\u003e | \u003cimg width=\"150px\" alt=\"Music Player Dark\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/music_player_dark.GIF\" style=\"box-shadow: 0px 0px 7px #cccccc;\"/\u003e |\n\nSource Link:\n\u003ca alt=\"Music player\" href=\"https://github.com/shirvanie/flutter_sliding_box/blob/master/example/lib/music_player_screen.dart\"\u003e\nexample/lib/music_player_screen.dart\n\u003c/a\u003e\n\n### Share\n\n| \u003cimg width=\"150px\" alt=\"Share Light\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/share_light.GIF\" style=\"box-shadow: 0px 0px 7px #cccccc;\"/\u003e |  \n|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|\n\n\nSource Link:\n\u003ca alt=\"Share\" href=\"https://github.com/shirvanie/flutter_sliding_box/blob/master/example/lib/share_screen.dart\"\u003e\nexample/lib/share_screen.dart\n\u003c/a\u003e\n\n### Messenger\n\n| \u003cimg width=\"150px\" alt=\"Messenger application\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/sliding_box_demo.GIF\" style=\"box-shadow: 0px 0px 7px #cccccc;\"/\u003e |  \n|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|\n\n\nSource Link:\n\u003ca alt=\"Messenger application\" href=\"https://github.com/shirvanie/flutter_messenger_clean_architecture\"\u003e\nMessenger application\n\u003c/a\u003e\n\n\u003cbr /\u003e\n\n# Getting Started\n\n-  [Installation](#installation)\n-  [Usage](#usage)\n-  [Custom Usage](#custom-usage)\n-  [Backdrop Usage](#backdrop-usage)\n-  [Backdrop AppBar Usage](#backdrop-appbar-usage)\n-  [SearchBox Usage](#searchbox-usage)\n-  [Box Controller](#box-controller)\n-  [Body Builder](#body-builder)\n-  [showSlidingBox Method](#showslidingbox-method)\n\n\n## Installation\n\nAdd *flutter_sliding_box* as a dependency in your `pubspec.yaml` file:\n\n```yaml\ndependencies:\n  flutter_sliding_box: ^1.1.5\n```\n\nImport the plugin package to your dart code\n\n```dart\nimport 'package:flutter_sliding_box/flutter_sliding_box.dart';\n```\n\n## Usage\n\n\u003cp\u003e\n \u003cimg width=\"220px\" alt=\"Simple SlidingBox\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/simple_box.png\"/\u003e\n\u003c/p\u003e\n\nBy default use SlidingBox as root widget for body (recommended)\n\n```dart\n@override\nWidget build(BuildContext context) {\n  return Scaffold(\n    body: SlidingBox(\n      body: const Center(\n        child: Text(\"This is the sliding box widget\",\n          style: TextStyle(color: Colors.black),),\n      ),\n      backdrop: Backdrop(\n        color: Colors.blueGrey,\n      ),\n    ),\n  );\n}\n```\n\n### Custom Usage\n\nThere are several options that allow for more control:\n\n| Properties               | Data Type              | Description                                                                                                                                                                                                |\n|--------------------------|------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `body`                   | `Widget`               | A widget that slides from `minHeight` to `maxHeight` and is placed on the `backdrop`.                                                                                                                      |\n| `bodyBuilder`            | `Widget`               | Provides a `ScrollController` to attach to a scrollable widget in the box and current box position. If `body` and `bodyBuilder` are both non-null, `body` will be used.                                    |\n| `controller`             | `BoxController`        | It can be used to control the state of sliding box and search box.                                                                                                                                         |\n| `collapsed`              | `bool`                 | If set to `true`, the state of the box is collapsed.                                                                                                                                                       |\n| `collapsedBody`          | `Widget`               | The Widget displayed overtop the box when `collapsed`. This fades out as the sliding box is `opened`.                                                                                                      |\n| `width`                  | `double`               | `width` of the sliding box.                                                                                                                                                                                |\n| `minHeight`              | `double`               | The height of the sliding box when fully `collapsed`.                                                                                                                                                      |\n| `maxHeight`              | `double`               | The height of the sliding box when fully `opened`.                                                                                                                                                         |\n| `color`                  | `Color`                | `color` to fill the background of the sliding box.                                                                                                                                                         |\n| `borderRadius`           | `BorderRadius`         | The corners of the sliding box are rounded by this.                                                                                                                                                        |\n| `style`                  | `BoxStyle`             | The styles of the sliding box that includes `shadow` and `sheet` and `none`.                                                                                                                               |\n| `physics`                | `ScrollPhysics`        | Gets a `ScrollPhysic`, the `physics` determines how the scroll view continues to animate after the user stops dragging the scroll view.                                                                    |\n| `draggable`              | `bool`                 | Allows toggling of draggability of the sliding box. If set to `false`, the sliding box cannot be dragged up or down.                                                                                       |\n| `draggableIcon`          | `IconData`             | A Icon Widget that is placed in top of the box. Gets a IconData.                                                                                                                                           |\n| `draggableIconColor`     | `Color`                | The color of the `draggableIcon`.                                                                                                                                                                          |\n| `draggableIconVisible`   | `bool`                 | If set to `false`, the `draggableIcon` hides. Use `controller` to open and close sliding box by taps.                                                                                                      |\n| `draggableIconBackColor` | `Color`                | The color to fill the background of the `draggableIcon` icon. The position of the icon is top of the box.                                                                                                  |\n| `onBoxSlide`             | `ValueChanged\u003cdouble\u003e` | This callback is called when the sliding box slides around with position of the box. The position is a double value between `0.0` and `1.0`, where `0.0` is fully `collapsed` and `1.0` is fully `opened`. |\n| `onBoxOpen`              | `VoidCallback`         | This callback is called when the sliding box is fully `opened`.                                                                                                                                            |\n| `onBoxClose`             | `VoidCallback`         | This callback is called when the sliding box is fully `closed`.                                                                                                                                            |\n| `onBoxShow`              | `VoidCallback`         | This callback is called when the sliding box is `visible`.                                                                                                                                                 |\n| `onBoxHide`              | `VoidCallback`         | This callback is called when the sliding box is `invisible`.                                                                                                                                               |\n| `onSearchBoxShow`        | `VoidCallback`         | This callback is called when the search box is `visible`.                                                                                                                                                  |\n| `onSearchBoxHide`        | `VoidCallback`         | This callback is called when the search box is `invisible`.                                                                                                                                                |\n| `animationCurve`         | `Curve`                | `animationCurve` defines the easier behavior of the box animation.                                                                                                                                         |\n| `animationDuration`      | `Duration`             | `animationDuration` defines the time for the box animation to complete.                                                                                                                                    |\n| `backdrop`               | `Backdrop`             | A Widget that is placed behind of the box, filled with the `Backdrop`.                                                                                                                                     |\n\n### Backdrop Usage\n\n#### Using the `Backdrop`\n\nManually change the `Backdrop` properties.\n\n| Properties           | Data Type        | Description                                                                                                                               |\n|----------------------|------------------|-------------------------------------------------------------------------------------------------------------------------------------------|\n| `color`              | `Color`          | `color` to fill the background of the `backdrop`.                                                                                         |\n| `width`              | `double`         | `width` of the `backdrop body`.                                                                                                           |\n| `fading`             | `bool`           | If set to `true`, the backdrop body `fades out` when the sliding box `opened`.                                                            |\n| `moving`             | `bool`           | If set to `true`, the backdrop body `moving up` when the sliding box `opened`.                                                            |\n| `overlay`            | `bool`           | If set to `true`, a dark layer displayed above of the `backdrop` and behind of the sliding box when is `opened`.                          |\n| `overlayOpacity`     | `double`         | Amount of dark overlay layer. a double value between `0.0` and `1.0`.                                                                     |\n| `backgroundGradient` | `Gradient`       | The gradient color to fill the background of the `backdrop`. if `color` and `backgroundGradient` are both non-null, `color` will be used. |\n| `body`               | `Widget`         | A Widget that is placed in the backdrop and behind of the sliding box.                                                                    |\n| `appBar`             | `BackdropAppBar` | `appBar` to display at the top of the `backdrop`.                                                                                         |\n\n\u003cp\u003e\n \u003cimg width=\"220px\" alt=\"BackdropAppBar\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/app_bar.png\"/\u003e\n\u003c/p\u003e\n\nSlidingBox includes appBar: `BackdropAppBar`\n\n```dart\nBoxController boxController = BoxController();\n\n@override\nWidget build(BuildContext context) {\n  return Scaffold(\n    body: SlidingBox(\n      controller: boxController,\n      minHeight: 200,\n      maxHeight: 400,\n      body: Center(\n        child: Text(\"This is the sliding box widget\",\n          style: TextStyle(color: Colors.black),),\n      ),\n      backdrop: Backdrop(\n        color: Colors.blueGrey,\n        appBar: BackdropAppBar(\n          title: Padding(\n              padding: EdgeInsets.all(10),\n              child: Text(\"AppBar\", style: TextStyle(fontSize: 20),)\n          ),\n          leading: Icon(Icons.menu, color: Colors.white, size: 27,),\n        ),\n      ),\n    ),\n  );\n}\n```\n\n### Backdrop AppBar Usage\n\n#### Using the `BackdropAppBar`\n\nManually change the `BackdropAppBar` properties.\n\n| Properties   | Data Type      | Description                                                                                                                                                                                                                |\n|--------------|----------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `title`      | `Widget`       | A Widget that is placed on the topLeft of the `backdrop`.                                                                                                                                                                  |\n| `leading`    | `Icon`         | A `Icon` Widget that is placed in left of the `title`.                                                                                                                                                                     |\n| `searchBox`  | `SearchBox`    | A search box to display above `backdrop`. add a IconButton widget to `actions` and call boxController.showSearchBox() in onPressed method. see \u003ca href=\"https://pub.dev/packages/flutter_sliding_box/example\"\u003eexample\u003c/a\u003e. |\n| `actions`    | `List\u003cWidget\u003e` | A list of Widgets placed on the topRight of the `backdrop`.                                                                                                                                                                |\n\n\n| \u003cimg width=\"220px\" alt=\"SearchBox\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/app_bar_search_icon.png\"/\u003e | \u003cimg width=\"220px\" alt=\"SearchBox\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/app_bar_search_body.png\"/\u003e |\n|:-----------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------:|\n\n\nSlidingBox appBar includes searchBox: `SearchBox`\n\n```dart\nBoxController boxController = BoxController();\nTextEditingController textEditingController = TextEditingController();\n\n@override\nWidget build(BuildContext context) {\n  return Scaffold(\n    body: SlidingBox(\n      controller: boxController,\n      minHeight: 200,\n      maxHeight: MediaQuery\n          .of(context)\n          .size\n          .height - 100,\n      body: Center(\n        child: Text(\"This is the sliding box widget\",\n          style: TextStyle(color: Colors.black),),\n      ),\n      backdrop: Backdrop(\n        color: Colors.blueGrey,\n        appBar: BackdropAppBar(\n            title: Padding(\n                padding: EdgeInsets.all(10),\n                child: Text(\"AppBar\", style: TextStyle(fontSize: 20),)\n            ),\n            leading: Icon(Icons.menu, color: Colors.white, size: 27,),\n            searchBox: SearchBox(\n              controller: textEditingController,\n              body: Center(\n                child: Text(\"This is the search box body widget\",\n                  style: TextStyle(color: Colors.black),\n                ),\n              ),\n            ),\n            actions: [\n              Container(\n                margin: const EdgeInsets.fromLTRB(0, 0, 10, 0),\n                child: SizedBox.fromSize(\n                  size: const Size.fromRadius(25),\n                  child: IconButton(\n                    iconSize: 25,\n                    icon: Icon(Icons.search, color: Colors.white, size: 27,),\n                    onPressed: () {\n                      textEditingController.text = \"\";\n                      boxController.showSearchBox();\n                    },\n                  ),\n                ),\n              ),\n            ]\n        ),\n      ),\n    ),\n  );\n}\n```\n\n### SearchBox Usage\n\n#### Using the `SearchBox`\n\nManually change the `SearchBox` properties.\n\n| Properties        | Data Type               | Description                                                                                                                                                                                                        |\n|-------------------|-------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `controller`      | `TextEditingController` | It can be used to control the state of search box text field. Gets a `TextEditingController`.                                                                                                                      |\n| `leading`         | `Icon`                  | A `Icon` Widget that is placed in left of the search box text field.                                                                                                                                               |\n| `color`           | `Color`                 | `color` to fill the background of the `SearchBox`.                                                                                                                                                                 |\n| `inputDecoration` | `InputDecoration`       | `decoration` to show around the search box text field.                                                                                                                                                             |\n| `borderRadius`    | `BorderRadius`          | The corners of the search box are rounded by this.                                                                                                                                                                 |\n| `style`           | `TextStyle`             | `style` for text of the SearchBox.                                                                                                                                                                                 |\n| `body`            | `Widget`                | A Widget that is placed in the sliding box (in search mode displays the search result).                                                                                                                            |\n| `draggableBody`   | `bool`                  | In search mode, allows toggling of draggability of the sliding box. If set to `false`, the sliding box cannot be dragged up or down when search box visible. If set to `true`, search box invisible when dragging. |\n\n\n| \u003cimg width=\"220px\" alt=\"Backdrop Overlay\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/backdrop_overlay_collapsed.png\"/\u003e | \u003cimg width=\"220px\" alt=\"Backdrop Overlay\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/backdrop_overlay_opened.png\"/\u003e  |\n|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------:|\n\nSlidingBox backdrop includes overlay: `true`\n\n\u003cbr\u003e\n\nCustomize `overlayOpacity` (a value between `0.0` and `1.0`), default value is `0.5`\n\n```dart\n@override\nWidget build(BuildContext context) {\n  return Scaffold(\n    body: SlidingBox(\n      body: const Center(\n        child: Text(\"This is the sliding box widget\",\n          style: TextStyle(color: Colors.black),\n        ),\n      ),\n      backdrop: Backdrop(\n        overlay: true,\n        overlayOpacity: 0.5,\n        color: Colors.grey,\n      ),\n    ),\n  );\n}\n```\n\n| \u003cimg width=\"220px\" alt=\"Backdrop Width\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/backdrop_width.png\"/\u003e | \u003cimg width=\"220px\" alt=\"SlidingBox Backdrop Width\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/box_width.png\"/\u003e |\n|:-----------------------------------------------------------------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------------------------------------------------------------------------:|\n\nSlidingBox `width` and Backdrop `width`\n\n```dart\n@override\nWidget build(BuildContext context) {\n  return Scaffold(\n    body: SlidingBox(\n      width: MediaQuery.of(context).size.width - 50,\n      minHeight: 200,\n      maxHeight: 400,\n      body: Center(\n        child: Text(\"This is the sliding box widget\",\n        style: TextStyle(color: Colors.black),),\n      ),\n      backdrop: Backdrop(\n        width: MediaQuery.of(context).size.width - 100,\n        color: Colors.blueGrey,\n      ),\n    ),\n  );\n}\n```\n\n| \u003cimg width=\"220px\" alt=\"SlidingBox BoxStyle.sheet\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/box_style_under_box.png\"/\u003e | \u003cimg width=\"220px\" alt=\"SlidingBox BoxStyle.shadow\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/box_style_shadow.png\"/\u003e |\n|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------:|\n\nSlidingBox includes style: `sheet`, `shadow`, `none`\n\n```dart\n@override\nWidget build(BuildContext context) {\n  return Scaffold(\n    body: SlidingBox(\n      minHeight: 200,\n      maxHeight: 400,\n      style: BoxStyle.sheet, /// or BoxStyle.shadow (default is 'none')\n      body: Center(\n        child: Text(\"This is the sliding box widget\",\n          style: TextStyle(color: Colors.black),),\n      ),\n      backdrop: Backdrop(\n        color: Colors.blueGrey,\n      ),\n    ),\n  );\n}\n```\n\n### Box Controller\n\n#### Using the `BoxController`\n\nManually change the `SearchBox` state. For better performance, use a `BoxController` as controller (recommended).\n\n| Properties           | Data Type | Description                                                                                                                                                            |\n|----------------------|-----------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| `isAttached`         | `bool`    | Determine if the `boxController` is attached to an instance of the `SlidingBox` (this property must be `true` before any other `BoxController` functions can be used). |\n| `isBoxOpen`          | `bool`    | Returns whether or not the box is `open`.                                                                                                                              |\n| `isBoxClosed`        | `bool`    | Returns whether or not the box is `close`.                                                                                                                             |\n| `isBoxVisible`       | `bool`    | Returns whether or not the box is `visible`.                                                                                                                           |\n| `isSearchBoxVisible` | `bool`    | Returns whether or not the search box is `visible`.                                                                                                                    |\n| `getPosition`        | `bool`    | Returns box position (a value between `0.0` and `1.0`).                                                                                                                |\n| `minHeight`          | `double`  | Returns box `minHeight`.                                                                                                                                               |\n| `maxHeight`          | `double`  | Returns box `maxHeight`.                                                                                                                                               |\n| `boxWidth`           | `double`  | Returns box `width`.                                                                                                                                                   |\n| `backdropWidth`      | `double`  | Returns backdrop `width`.                                                                                                                                              |\n\n| Methods           | Return Type    | Description                                                                     |\n|-------------------|----------------|---------------------------------------------------------------------------------|\n| `openBox()`       | `Future\u003cvoid\u003e` | Opens the sliding box with animation (i.e. to the `maxHeight`).                 |\n| `closeBox()`      | `Future\u003cvoid\u003e` | Closes the sliding box with animation (i.e. to the `minHeight`).                |\n| `showBox()`       | `Future\u003cvoid\u003e` | Shows the sliding box (i.e. is visible).                                        |\n| `hideBox()`       | `Future\u003cvoid\u003e` | Hides the sliding box (i.e. is invisible).                                      |\n| `showSearchBox()` | `Future\u003cvoid\u003e` | Shows the search box (i.e. is visible).                                         |\n| `hideSearchBox()` | `Future\u003cvoid\u003e` | Hides the search box (i.e. is invisible).                                       |\n| `setPosition()`   | `Future\u003cvoid\u003e` | Sets the sliding box position with animation (a value between `0.0` and `1.0)`. |\n| `setSearchBody()` | `Future\u003cvoid\u003e` | Sets the search box `body` content.                                             |\n\n| \u003cimg width=\"220px\" alt=\"BoxController\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/box_controller1.png\"/\u003e | \u003cimg width=\"220px\" alt=\"BoxController ShowSearchBox\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/box_controller2.png\"/\u003e |\n|:-----------------------------------------------------------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------:|\n\n```dart\nBoxController boxController = BoxController();\nTextEditingController textEditingController = TextEditingController();\n\n@override\nWidget build(BuildContext context) {\n  return Scaffold(\n    body: SlidingBox(\n      controller: boxController,\n      minHeight: 200,\n      maxHeight: MediaQuery\n          .of(context)\n          .size\n          .height - 100,\n      body: const Center(\n        child: Text(\"This is the sliding box widget\",\n          style: TextStyle(color: Colors.black),),\n      ),\n      collapsed: true,\n      backdrop: Backdrop(\n        color: Colors.blueGrey,\n        appBar: BackdropAppBar(\n            searchBox: SearchBox(\n              controller: textEditingController,\n              body: Center(\n                child: MaterialButton(\n                  child: Text(\"Hide SearchBox\"),\n                  onPressed: () {\n                    boxController.hideSearchBox();\n                    boxController.closeBox();\n                  },\n                  color: Colors.blueGrey,\n                  textColor: Colors.white,\n                ),\n              ),\n              draggableBody: true,\n            ),\n            actions: [\n              Container(\n                margin: const EdgeInsets.fromLTRB(0, 0, 10, 0),\n                child: SizedBox.fromSize(\n                  size: const Size.fromRadius(25),\n                  child: IconButton(\n                    iconSize: 25,\n                    icon: Icon(Icons.search, color: Colors.white, size: 27,),\n                    onPressed: () {\n                      textEditingController.text = \"\";\n                      boxController.showSearchBox();\n                    },\n                  ),\n                ),\n              ),\n            ]\n        ),\n        body: SingleChildScrollView(\n          child: SizedBox(\n            width: MediaQuery\n                .of(context)\n                .size\n                .width,\n            height: MediaQuery\n                .of(context)\n                .size\n                .height,\n            child: Column(\n              mainAxisAlignment: MainAxisAlignment.center,\n              children: [\n                MaterialButton(\n                  child: Text(\"Open\"),\n                  onPressed: () =\u003e boxController.openBox(),\n                  color: Colors.white,\n                ),\n                MaterialButton(\n                  child: Text(\"Close\"),\n                  onPressed: () =\u003e boxController.closeBox(),\n                  color: Colors.white,\n                ),\n                MaterialButton(\n                  child: Text(\"Show\"),\n                  onPressed: () =\u003e boxController.showBox(),\n                  color: Colors.white,\n                ),\n                MaterialButton(\n                  child: Text(\"Hide\"),\n                  onPressed: () =\u003e boxController.hideBox(),\n                  color: Colors.white,\n                ),\n                MaterialButton(\n                  child: Text(\"Show SearchBox\"),\n                  onPressed: () =\u003e boxController.showSearchBox(),\n                  color: Colors.white,\n                ),\n                MaterialButton(\n                  child: Text(\"Hide SearchBox\"),\n                  onPressed: () =\u003e boxController.hideSearchBox(),\n                  color: Colors.white,\n                ),\n              ],\n            ),\n          ),\n        ),\n      ),\n    ),\n  );\n}\n```\n\n### Body Builder\n\n#### Using the `bodyBuilder`\n\nWhen content overflow in body widget, scroll enable automatically and can using the body builder to manage and control `scroll` and box `position`.\n\n| \u003cimg width=\"220px\" alt=\"SlidingBox bodyBuilder collapsed\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/body_builder_collapsed.png\"/\u003e | \u003cimg width=\"220px\" alt=\"SlidingBox bodyBuilder dragged\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/body_builder_dragged.png\"/\u003e | \u003cimg width=\"220px\" alt=\"SlidingBox bodyBuilder opened\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/body_builder_opened.png\"/\u003e |\n|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------:|\n\n```dart\n@override\nWidget build(BuildContext context) {\n  return Scaffold(\n    body: SlidingBox(\n      minHeight: 200,\n      maxHeight: 400,\n      bodyBuilder: (sc, pos) =\u003e _body(sc, pos),\n      backdrop: Backdrop(\n        color: Colors.blueGrey,\n      ),\n    ),\n  );\n}\n\n_body(ScrollController sc, double pos) {\n  sc.addListener(() {\n    print(\"scrollController position: ${sc.position.pixels}\");\n  });\n  return Column(\n    children: [\n      SizedBox(height: 10,),\n      Center(\n        child: Text(\"box position: $pos\",\n          style: TextStyle(color: Colors.black),),\n      ),\n      SizedBox(height: 10,),\n      Container(color: Colors.grey, height: 100,),\n      SizedBox(height: 10,),\n      Container(color: Colors.grey, height: 100,),\n      SizedBox(height: 10,),\n      Container(color: Colors.grey, height: 100,),\n      SizedBox(height: 10,),\n      Container(color: Colors.grey, height: 100,),\n    ],\n  );\n}\n```\n\n### showSlidingBox Method\n\n#### Using the `showSlidingBox()` method\n\nDisplay a SlidingBox easily and simply. Just call `showSlidingBox()` method.\n\n| \u003cimg width=\"220px\" alt=\"showSlidingBoxClose\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/showSlidingBoxClose.png\"/\u003e | \u003cimg width=\"220px\" alt=\"showSlidingBoxOpen\" src=\"https://raw.githubusercontent.com/shirvanie/flutter_sliding_box/master/screenshots/showSlidingBoxOpen.png\"/\u003e |\n|:---------------------------------------------------------------------------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------------------------------:|\n\n```dart\n@override\nWidget build(BuildContext context) {\n  return Scaffold(\n    backgroundColor: Colors.blueGrey,\n    body: Center(\n      child: MaterialButton(\n        color: Colors.white,\n        onPressed: () {\n          /// Shows SlidingBox\n          showSlidingBox(\n              context: context,\n              box: SlidingBox(\n                body: const Center(\n                  child: Text(\"This is the sliding box widget\",\n                    style: TextStyle(color: Colors.black),),\n                ),\n              )\n          );\n        },\n        child: const Text(\"Show SlidingBox\"),\n      ),\n    ),\n  );\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshirvanie%2Fflutter_sliding_box","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshirvanie%2Fflutter_sliding_box","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshirvanie%2Fflutter_sliding_box/lists"}