{"id":19312072,"url":"https://github.com/weblineindia/flutter-drawer","last_synced_at":"2025-04-22T15:31:45.514Z","repository":{"id":129984526,"uuid":"280378897","full_name":"weblineindia/Flutter-Drawer","owner":"weblineindia","description":"A Flutter based Reusable Drawer component which provides Drawer menu with configurable items and dynamic views that can be used in any Flutter application.","archived":false,"fork":false,"pushed_at":"2020-07-17T10:36:03.000Z","size":709,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-19T13:35:40.376Z","etag":null,"topics":["custom-drawer","drawer-component","drawer-menu","flutter","flutter-components","flutter-demo","flutter-drawer","flutter-examples","flutter-library","flutter-plugin","flutter-slider","flutter-sliding-menu","reusable-components","side-menu-controller"],"latest_commit_sha":null,"homepage":"https://www.weblineindia.com/software-development-resources.html","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/weblineindia.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG","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":"2020-07-17T09:07:25.000Z","updated_at":"2024-08-13T17:20:59.000Z","dependencies_parsed_at":"2023-04-15T04:14:00.798Z","dependency_job_id":null,"html_url":"https://github.com/weblineindia/Flutter-Drawer","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FFlutter-Drawer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FFlutter-Drawer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FFlutter-Drawer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/weblineindia%2FFlutter-Drawer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/weblineindia","download_url":"https://codeload.github.com/weblineindia/Flutter-Drawer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250267371,"owners_count":21402463,"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":["custom-drawer","drawer-component","drawer-menu","flutter","flutter-components","flutter-demo","flutter-drawer","flutter-examples","flutter-library","flutter-plugin","flutter-slider","flutter-sliding-menu","reusable-components","side-menu-controller"],"created_at":"2024-11-10T00:32:36.745Z","updated_at":"2025-04-22T15:31:45.489Z","avatar_url":"https://github.com/weblineindia.png","language":"Dart","readme":"# Flutter - Drawer Component\n\nA Flutter based Reusable Drawer component which provides Drawer menu with configurable items and dynamic views that can be used in any Flutter application.\n\n\n## Table of contents\n- [Flutter Support](#Flutter-support)\n- [Demo](#demo)\n- [Features](#features)\n- [Getting started](#getting-started)\n- [Usage](#usage)\n- [Methods](#methods)\n- [Want to Contribute?](#want-to-contribute)\n- [Need Help / Support?](#need-help)\n- [Collection of Components](#collection-of-Components)\n- [Changelog](#changelog)\n- [License](#license)\n- [Keywords](#Keywords)\n\n\n## Flutter Support\n\nVersion - Flutter 1.17 (stable)\n\nWe have tested our program in above version, however you can use it in other versions as well.\n\n\n## Demo\n[![](drawer.gif)](https://github.com/weblineindia/Flutter-Drawer/blob/master/drawer.gif)\n\n------\n\n## Features\n\n* Drawer with Customizable Menu header.\n* Drawer with Customizable Menu icons.\n* Customizable UI with trailing items.\n\n\n## Getting started\n\n* Download this sample project and import app_drawer.dart Widget file in your Flutter App. \n* Update Header, Title based on your requirements. \n\n\n## Usage\n\nSetup process is described below to integrate in project.\n\n## Configure DrawerMenu in your widget by following below method steps\n\n### Methods\n\nStep 1.Add  'provider' package to pubspec.yaml\n\nStep 2. Add MultiProvider in Your application widget like this\n       \n    // Put DrawerNavigationProvider as mention below\n    class MyApp extends StatelessWidget {\n      @override\n      Widget build(BuildContext context) {\n        final MaterialColor colorCustom = MaterialColor(0xFFFACA58, color);\n        return MultiProvider(\n          providers: [\n            ChangeNotifierProvider.value(\n              value: DrawerNavigationProvider(),\n            )\n          ],\n          child: MaterialApp(\n            title: 'Flutter Demo',\n            home: ...,\n          ),\n        );\n      }\n    }\n       \n\nStep 3. User following DrawerVC constructor for adding drawer to user main screen             \n       \n       Color selectedTextColor;\n       Color textColor;\n       int selectedIndex;\n       bool isHeader = true;\n       bool isShowIcon = true;\n       Widget headerWidget;\n       List\u003cDrawerMenuItem\u003e arrDrawerItems;\n       Function(int) didItemSelected;\n       \n       DrawerVC({\n            this.arrDrawerItems,\n            this.isHeader,\n            this.headerWidget,\n            this.isShowIcon,\n            this.textColor,\n            this.selectedTextColor,\n            this.didItemSelected,\n        });\n        \n        // Pass DrawerMenuItem Array to the DrawerVC's Constructor\n        class DrawerMenuItem {\n          String title;\n          IconData icon;\n          Widget subItemWidget;\n\n          // ignore: sort_constructors_first\n          DrawerMenuItem({this.title, this.icon, this.subItemWidget});\n        }\n\n\nStep 4. Pass header widget if you want to add it otherwise skip it  \n\n    this.isHeader = true // if you want to add header make sure you need to set this flag to true\n    headerWidget: Widget() \n\n\nStep 5.if you want set text color  and selected text color \n\n    textColor: Colors.white\n    selectedTextColor: Colors.white\n    \nStep 6.if you want enable/disable Drawer item icons \n    \n    isShowIcon : true // if you want to show icon the set this to true otherwise false\n\nStep 7.if you want add trailing item icons then pass widget to  DrawerMenuItem class using below constructor   \n        \n      subItemWidget : Widget() // use this parameter to set trailing icons to drawer\n       \n    // Pass DrawerMenuItem Array to the DrawerVC's Constructor\n           class DrawerMenuItem {\n             String title;\n             IconData icon;\n             Widget subItemWidget;\n\n             // ignore: sort_constructors_first\n             DrawerMenuItem({this.title, this.icon, this.subItemWidget});\n           }\nStep 8. if you want selected index of drawer menu you can get that in following ways \n\n    class HomeScreen extends StatelessWidget {\n      final arrDrawerItems = [\n        DrawerMenuItem(title: 'Home', icon: Icons.home, subItemWidget: null),\n        DrawerMenuItem(\n          title: 'Second View',\n          icon: Icons.favorite,\n          subItemWidget: const Text('13'),\n        ),\n        DrawerMenuItem(\n            title: 'Third View', icon: Icons.search, subItemWidget: null),\n      ]; //List for drawer items\n\n      @override\n      Widget build(BuildContext context) {\n        return Scaffold(\n          drawer: DrawerVC(\n            arrDrawerItems: arrDrawerItems,\n            headerWidget: _buildHeaderForDrawer(context),\n            isHeader: true,\n            isShowIcon: true,\n            textColor: Colors.black,\n            selectedTextColor: Colors.amber,\n            didItemSelected: (int selectedIndex) {} // Using this function you get selected index of drawer,\n          ),\n          appBar: AppBar(\n              centerTitle: true,\n              iconTheme: const IconThemeData(color: Colors.white),\n              // You must implement this Consumer\u003cDrawerNavigationProvider\u003e provide for navigation and  you can also get selected index of drawer\n              title: Consumer\u003cDrawerNavigationProvider\u003e(\n                builder: (ctx, item, child) {\n                  if (item.selectedIndex == 0) {\n                    return const Text(\n                      'Home',\n                      style: TextStyle(color: Colors.white),\n                    );\n                  } else if (item.selectedIndex == 1) {\n                    return const Text('Second View',\n                        style: TextStyle(color: Colors.white));\n                  } else {\n                    return const Text('Third View',\n                        style: TextStyle(color: Colors.white));\n                  }\n                },\n              ),\n              brightness: Brightness.light),\n          body: Center(\n          // You must implement this Consumer\u003cDrawerNavigationProvider\u003e provide for navigation and  you can also get selected index of drawer\n            child: Consumer\u003cDrawerNavigationProvider\u003e(\n                  builder: (ctx, item, child) {\n                    if (item.selectedIndex == 0) {\n                      return YOUR_WIDGET();\n                    } else if (item.selectedIndex == 1) {\n                      return YOUR_WIDGET();\n                    } else {\n                      return YOUR_WIDGET();\n                    }\n                  },\n                ) ??\n                const Text('No data'),\n          ),\n        );\n      }\n    }\n    \n------\n\n## Want to Contribute?\n\n- Created something awesome, made this code better, added some functionality, or whatever (this is the hardest part).\n- [Fork it](http://help.github.com/forking/).\n- Create new branch to contribute your changes.\n- Commit all your changes to your branch.\n- Submit a [pull request](http://help.github.com/pull-requests/).\n\n------\n\n## Need Help? \nIf you need help then feel free to contact our [Flutter developers](https://www.weblineindia.com/flutter-cross-platform-mobile-app-development.html).\n\n ------\n \n## Collection of Components\n We have built many other components and free resources for software development in various programming languages. Kindly click here to view our [Free Resources for Software Development.](https://www.weblineindia.com/software-development-resources.html)\n \n------\n\n## Changelog\nDetailed changes for each release are documented in [CHANGELOG](./CHANGELOG).\n\n## License\n\n[MIT](LICENSE)\n\n[mit]: https://github.com/weblineindia/Flutter-Drawer/blob/master/LICENSE\n\n## Keywords\nFlutter Drawer Menu, Custom Drawer menu, Side menu, FLutter Slider Menu, Custom Slider, Weblineindia\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweblineindia%2Fflutter-drawer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fweblineindia%2Fflutter-drawer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fweblineindia%2Fflutter-drawer/lists"}