{"id":13685766,"url":"https://github.com/shiburagi/Drawer-Behavior-Flutter","last_synced_at":"2025-05-01T04:32:22.043Z","repository":{"id":40431923,"uuid":"169444619","full_name":"shiburagi/Drawer-Behavior-Flutter","owner":"shiburagi","description":"Drawer behavior is a library that provide an extra behavior on drawer, such as, move view or scaling view's height while drawer on slide.","archived":false,"fork":false,"pushed_at":"2024-06-15T10:36:14.000Z","size":8252,"stargazers_count":209,"open_issues_count":7,"forks_count":36,"subscribers_count":1,"default_branch":"Version-3.0.0","last_synced_at":"2024-10-12T20:09:30.765Z","etag":null,"topics":["android","drawer","drawer-layout","drawer-navigation","drawerlayout","flutter","flutter-package","flutter-plugin","flutter-widget","ios","menu","menuview","navigation-drawer","sidebar","slide"],"latest_commit_sha":null,"homepage":"","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/shiburagi.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-06T17:17:16.000Z","updated_at":"2024-09-10T02:21:07.000Z","dependencies_parsed_at":"2024-01-14T17:18:16.695Z","dependency_job_id":"d9e37713-bbed-413d-b696-52362d8ff7aa","html_url":"https://github.com/shiburagi/Drawer-Behavior-Flutter","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiburagi%2FDrawer-Behavior-Flutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiburagi%2FDrawer-Behavior-Flutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiburagi%2FDrawer-Behavior-Flutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shiburagi%2FDrawer-Behavior-Flutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shiburagi","download_url":"https://codeload.github.com/shiburagi/Drawer-Behavior-Flutter/tar.gz/refs/heads/Version-3.0.0","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251824593,"owners_count":21649894,"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","drawer","drawer-layout","drawer-navigation","drawerlayout","flutter","flutter-package","flutter-plugin","flutter-widget","ios","menu","menuview","navigation-drawer","sidebar","slide"],"created_at":"2024-08-02T14:00:57.103Z","updated_at":"2025-05-01T04:32:22.033Z","avatar_url":"https://github.com/shiburagi.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"[![pub package](https://img.shields.io/pub/v/drawerbehavior.svg)](https://pub.dartlang.org/packages/drawerbehavior)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section --\u003e\n[![All Contributors](https://img.shields.io/badge/all_contributors-4-orange.svg?style=flat-square)](#contributors-)\n\u003c!-- ALL-CONTRIBUTORS-BADGE:END --\u003e\n\n# Drawer Behavior - Flutter\n\nDrawer behavior is a library that provide an extra behavior on drawer, such as, move view or scaling view's height while drawer on slide.\n\n![Alt Text](https://github.com/shiburagi/Drawer-Behavior-Flutter/blob/preview/preview-ios-gif.gif)\n\n\n---\n\n**Code Base \u0026 Credit :**\nhttps://github.com/matthew-carroll/flutter_ui_challenge_zoom_menu\n\n---\n\n\n## Table of contents\n- [Drawer Behavior - Flutter](#drawer-behavior---flutter)\n  - [Table of contents](#table-of-contents)\n    - [Todo](#todo)\n    - [NEW UPDATES](#new-updates)\n  - [Usage](#usage)\n  - [Example](#example)\n  - [Migration (Null-safety Release)](#migration-null-safety-release)\n    - [mainDrawer (DrawerScaffold) -\\\u003e defaultDirection (DrawerScaffold)](#maindrawer-drawerscaffold---defaultdirection-drawerscaffold)\n  - [Migration](#migration)\n    - [contentView (Screen) -\\\u003e builder (ScreenBuilder)](#contentview-screen---builder-screenbuilder)\n    - [menuView (MenuView) -\\\u003e drawers (List\\\u003cSideDrawer\\\u003e)](#menuview-menuview---drawers-listsidedrawer)\n    - [percentage (DrawerScaffold) -\\\u003e drawers (List\\\u003cSideDrawer\\\u003e))](#percentage-drawerscaffold---drawers-listsidedrawer)\n  - [Preview](#preview)\n    - [Scale Effect](#scale-effect)\n    - [Right Drawer](#right-drawer)\n    - [3D Effect](#3d-effect)\n    - [Drawer with Header](#drawer-with-header)\n    - [Drawer with Footer](#drawer-with-footer)\n    - [Drawer with Header and Custom Builder](#drawer-with-header-and-custom-builder)\n    - [Peek Drawer](#peek-drawer)\n  - [Customize](#customize)\n  - [Contributors](#contributors)\n\n\n### Todo \n https://github.com/shiburagi/Drawer-Behavior-Flutter/projects/1\n\n\n### NEW UPDATES\n\n**Version 2.3**\n- Peek Menu\n- ClassName.identifier: **SideDrawer.count()**, **SideDrawer.child()** and **SideDrawer.custom()**\n- Uncontrol SideDrawer\n\n**Version 2.0**\n- Sound null-safety\n\n**Version 1.0**\n- Elevation Config\n- 3D effect\n- Multi-Drawer\n- Right Drawer\n\n**Version 0.0**\n- Floating action button with location and animator\n- Bottom navigation bar\n- Extended body\n- AndroidX support  \n\n\n## Usage\n\n1. **Depend on it**\n\nAdd this to your package's pubspec.yaml file:\n\n```yaml\ndependencies:\n  drawerbehavior: latest_version\n```\n\n2. **Install it**\n\nYou can install packages from the command line:\n\nwith Flutter:\n\n```\n$ flutter packages get\n```\n\nAlternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.\n\n3. **Import it**\n\nNow in your Dart code, you can use:\n\n```dart\nimport 'package:drawerbehavior/drawerbehavior.dart';\n```\n\n## Example\n```dart\n\nclass DrawerScale extends StatefulWidget {\n  @override\n  _DrawerScaleState createState() =\u003e _DrawerScaleState();\n}\n\nclass _DrawerScaleState extends State\u003cDrawerScale\u003e {\n  late int selectedMenuItemId;\n\n  @override\n  void initState() {\n    selectedMenuItemId = menu.items[0].id;\n    super.initState();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    return DrawerScaffold(\n      appBar: AppBar(\n          title: Text(\"Drawer - Scale\"),\n          actions: [IconButton(icon: Icon(Icons.add), onPressed: () {})]),\n      drawers: [\n        SideDrawer(\n          percentage: 0.6,\n          menu: menu,\n          direction: Direction.left,\n          animation: true,\n          color: Theme.of(context).primaryColor,\n          selectedItemId: selectedMenuItemId,\n          onMenuItemSelected: (itemId) {\n            setState(() {\n              selectedMenuItemId = itemId;\n            });\n          },\n        )\n      ],\n      builder: (context, id) =\u003e IndexedStack(\n        index: id,\n        children: menu.items\n            .map((e) =\u003e Center(\n                  child: Text(\"Page~${e.title}\"),\n                ))\n            .toList(),\n      ),\n    );\n  }\n}\n\n\n```\n## Migration (Null-safety Release)\n--- \u003c!-- no toc --\u003e\n### mainDrawer (DrawerScaffold) -\u003e defaultDirection (DrawerScaffold)\n```dart\nnew DrawerScaffold(\n  mainDrawer: Direction.right,\n  ...\n);\n```\n**to**\n```dart\nnew DrawerScaffold(\n  defaultDirection: Direction.right,\n  ...\n);\n```\n--- \u003c!-- no toc --\u003e\n\n## Migration\n--- \u003c!-- no toc --\u003e\n### contentView (Screen) -\u003e builder (ScreenBuilder)\n```dart\ncontentView: Screen(\n  contentBuilder: (context) =\u003e Center(child: _widget),\n  color: Colors.white,\n),\n```\n**to**\n```dart\nbuilder: (context, id) =\u003e Center(child: _widget),\n```\n--- \u003c!-- no toc --\u003e\n### menuView (MenuView) -\u003e drawers (List\\\u003cSideDrawer\u003e)\n```dart\nmenuView: new MenuView(\n    menu: menu,\n    headerView: headerView(context),\n    animation: false,\n    mainAxisAlignment: MainAxisAlignment.start,\n    color: Theme.of(context).primaryColor,\n    selectedItemId: selectedMenuItemId,\n    onMenuItemSelected: (String itemId) {\n      selectedMenuItemId = itemId;\n      if (itemId == 'restaurant') {\n        setState(() =\u003e _widget = Text(\"1\"));\n      } else {\n        setState(() =\u003e _widget = Text(\"default\"));\n      }\n    },\n  ),\n```\n**to**\n```dart\ndrawers: [\n  SideDrawer(\n    menu: menu,\n    direction: Direction.left, // Drawer position, left or right\n    animation: true,\n    color: Theme.of(context).primaryColor,\n    selectedItemId: selectedMenuItemId,\n    onMenuItemSelected: (itemId) {\n      setState(() {\n        selectedMenuItemId = itemId;\n      });\n    },\n  )\n],\n```\n\n\n\n---\n### percentage (DrawerScaffold) -\u003e drawers (List\\\u003cSideDrawer\u003e))\n```dart\nDrawerScaffold(\n  percentage: 0.6,\n  ...\n);\n```\n**to**\n```dart\nDrawerScaffold(\n  drawers: [\n    SideDrawer(\n      percentage: 0.6,\n      ...\n    )\n  ]  \n  ...\n);\n```\n---\n \n\n## Preview\n\n### Scale Effect\n\n\u003cimg src=\"https://github.com/shiburagi/Drawer-Behavior-Flutter/blob/preview/preview-ios-1.png?raw=true\" width=\"400px\"/\u003e\n\n```dart\nnew DrawerScaffold(\n  drawers: [\n    SideDrawer(\n      percentage: 0.6,\n      ...\n    )\n  ]\n  ...\n);\n```\n---\n\n### Right Drawer\n\n\u003cimg src=\"https://github.com/shiburagi/Drawer-Behavior-Flutter/blob/preview/preview_ios_scale_right.png?raw=true\" width=\"400px\"/\u003e\n\n```dart\nnew DrawerScaffold(\n  drawers: [\n    SideDrawer(\n      direction:Direction.right\n      ...\n    )\n  ]\n  ...\n);\n```\n---\n\n### 3D Effect\n\n\u003cimg src=\"https://github.com/shiburagi/Drawer-Behavior-Flutter/blob/preview/preview_ios_3d.png?raw=true\" width=\"400px\"/\u003e\n\n```dart\nnew DrawerScaffold(\n  drawers: [\n    SideDrawer(\n      degree: 45,\n      ...\n    )\n  ]\n  ...\n);\n```\n---\n\n### Drawer with Header\n\n\u003cimg src=\"https://github.com/shiburagi/Drawer-Behavior-Flutter/blob/preview/preview-ios-2.png?raw=true\" width=\"400px\"/\u003e\n\n```dart\nnew DrawerScaffold(\n  headerView: headerView(context),\n  ...\n);\n```\n---\n\n### Drawer with Footer\n\n\u003cimg src=\"https://github.com/shiburagi/Drawer-Behavior-Flutter/blob/preview/preview-ios-4.png?raw=true\" width=\"400px\"/\u003e\n\n```dart\nnew DrawerScaffold(\n  footerView: footerView(context),\n  ...\n);\n```\n---\n\n### Drawer with Header and Custom Builder\n\n\u003cimg src=\"https://github.com/shiburagi/Drawer-Behavior-Flutter/blob/preview/preview-ios-5.png?raw=true\" width=\"400px\"/\u003e\n\n```dart\nnew DrawerScaffold(\n  headerView: headerView(context),\n  drawers: [\n      SideDrawer(\n        itemBuilder:\n            (BuildContext context, MenuItem menuItem, bool isSelected) {\n          return Container(\n            color: isSelected\n                ? Theme.of(context).colorScheme.secondary.withOpacity(0.7)\n                : Colors.transparent,\n            padding: EdgeInsets.fromLTRB(24, 16, 24, 16),\n            child: Text(\n              menuItem.title,\n              style: Theme.of(context).textTheme.subtitle1?.copyWith(\n                  color: isSelected ? Colors.black87 : Colors.white70),\n            ),\n          );\n        }\n      )\n  ],\n  ...\n);\n```\n---\n\n### Peek Drawer\n\n\u003cimg src=\"https://github.com/shiburagi/Drawer-Behavior-Flutter/blob/preview/preview-ios-6.png?raw=true\" width=\"400px\"/\u003e\n\n```dart\nnew DrawerScaffold(\n  headerView: headerView(context),\n  drawers: [\n      SideDrawer(\n        peekMenu: true,\n        percentage: 1,\n        menu: menuWithIcon,\n        direction: Direction.left,\n      )\n  ],\n  ...\n);\n```\n---\n\n## Customize\n\n*DrawerScaffold*\n```dart\nList\u003cSideDrawer\u003e drawers; //required\nDrawerScaffoldController controller;\nScreenBuilder builder;\nbool enableGestures; // default: true\nPreferredSizeWidget appBar;\ndouble cornerRadius; // default: 16\ndouble bacgroundColor; // default: Theme.of(context).scaffoldBackgroundColor\nWidget floatingActionButton;\nWidget bottomNavigationBar;\nFloatingActionButtonLocation floatingActionButtonLocation;\nFloatingActionButtonAnimator floatingActionButtonAnimator;\nList\u003cBoxShadow\u003e contentShadow;\nWidget bottomSheet;\nbool closeOnPopInvoked; // [IOS] default: true\nbool extendBodyBehindAppBar;\nList\u003cWidget\u003e persistentFooterButtons;\nbool primary;\nbool resizeToAvoidBottomInset;\nbool resizeToAvoidBottomPadding;\n\n/// Listen to offset value on slide event for which [SideDrawer]\nFunction(SideDrawer, double) onSlide;\n/// Listen to which [SideDrawer] is opened (offset=1)\nFunction(SideDrawer) onOpened;\n/// Listen to which [SideDrawer] is closed (offset=0)\nFunction(SideDrawer) onClosed;\n```\n*SideDrawer*\n```dart\ndouble percentage; // default: 0.8\ndouble elevation; // default: 4\ndouble cornerRadius;\ndouble degree; // 15-45 degree\ndouble peekSize; // 56px\nMenu menu;\nString selectedItemId;\nDirection direction;\nDuration duration;\nCurve curve;\nbool animation; //default: false\nbool slide; //default: false\nbool peekMenu; //default: false\nbool hideOnItemPressed; //default: true\nFunction(String) onMenuItemSelected;\nWidget headerView;\nWidget footerView;\nDecorationImage background;\nColor color;\nColor selectorColor;\nTextStyle textStyle;\nAlignment alignment;\nEdgeInsets padding;\nFunction(BuildContext, MenuItem, bool) itemBuilder;\n\n```\n\n*MenuItem*\n```dart\nString id;\nString title;\nIconData icon;\n```\n\n## Contributors\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\u003ctable\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/trademunch\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/45367267?v=4?s=100\" width=\"100px;\" alt=\"trademunch\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003etrademunch\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/shiburagi/Drawer-Behavior-Flutter/commits?author=trademunch\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/anjarnaufals\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/50995060?v=4?s=100\" width=\"100px;\" alt=\"anjarnaufals\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eanjarnaufals\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/shiburagi/Drawer-Behavior-Flutter/commits?author=anjarnaufals\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/vladaman\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/907206?v=4?s=100\" width=\"100px;\" alt=\"Vladimir Vlach\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eVladimir Vlach\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/shiburagi/Drawer-Behavior-Flutter/commits?author=vladaman\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n      \u003ctd align=\"center\" valign=\"top\" width=\"14.28%\"\u003e\u003ca href=\"https://github.com/tenhaus\"\u003e\u003cimg src=\"https://avatars.githubusercontent.com/u/1205495?v=4?s=100\" width=\"100px;\" alt=\"Chris Hayen\"/\u003e\u003cbr /\u003e\u003csub\u003e\u003cb\u003eChris Hayen\u003c/b\u003e\u003c/sub\u003e\u003c/a\u003e\u003cbr /\u003e\u003ca href=\"https://github.com/shiburagi/Drawer-Behavior-Flutter/commits?author=tenhaus\" title=\"Code\"\u003e💻\u003c/a\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n\u003c!-- prettier-ignore-start --\u003e\n\u003c!-- markdownlint-disable --\u003e\n\n\u003c!-- markdownlint-restore --\u003e\n\u003c!-- prettier-ignore-end --\u003e\n\n\u003c!-- ALL-CONTRIBUTORS-LIST:END --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshiburagi%2FDrawer-Behavior-Flutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshiburagi%2FDrawer-Behavior-Flutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshiburagi%2FDrawer-Behavior-Flutter/lists"}