{"id":851,"date":"2024-07-01T15:51:24","date_gmt":"2024-07-01T15:51:24","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=851"},"modified":"2024-07-01T15:51:26","modified_gmt":"2024-07-01T15:51:26","slug":"what-is-drawer-in-flutter","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/what-is-drawer-in-flutter\/","title":{"rendered":"what is drawer in flutter"},"content":{"rendered":"\n

In Flutter, a Drawer<\/code> is a sliding panel that typically contains a list of items. It is used for navigation within an app. The Drawer<\/code> slides in from the side of the screen and can be opened by swiping from the left edge of the screen or by tapping the menu icon in the AppBar<\/code>.<\/p>\n\n\n\n

Example of Using a Drawer :-<\/strong><\/p>\n\n\n\n

import 'package:flutter\/material.dart';\r\n\r\nvoid main() {\r\n  runApp(MyApp());\r\n}\r\n\r\nclass MyApp extends StatelessWidget {\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    return MaterialApp(\r\n      home: HomeScreen(),\r\n    );\r\n  }\r\n}\r\n\r\nclass HomeScreen extends StatelessWidget {\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    return Scaffold(\r\n      appBar: AppBar(\r\n        title: Text('Home Screen'),\r\n      ),\r\n      drawer: Drawer(\r\n        child: ListView(\r\n          padding: EdgeInsets.zero,\r\n          children: <Widget>[\r\n            DrawerHeader(\r\n              child: Text(\r\n                'Drawer Header',\r\n                style: TextStyle(color: Colors.white, fontSize: 24),\r\n              ),\r\n              decoration: BoxDecoration(\r\n                color: Colors.blue,\r\n              ),\r\n            ),\r\n            ListTile(\r\n              leading: Icon(Icons.home),\r\n              title: Text('Home'),\r\n              onTap: () {\r\n                Navigator.pop(context);\r\n              },\r\n            ),\r\n            ListTile(\r\n              leading: Icon(Icons.person),\r\n              title: Text('Profile'),\r\n              onTap: () {\r\n                Navigator.pop(context);\r\n              },\r\n            ),\r\n            ListTile(\r\n              leading: Icon(Icons.settings),\r\n              title: Text('Settings'),\r\n              onTap: () {\r\n                Navigator.pop(context);\r\n              },\r\n            ),\r\n          ],\r\n        ),\r\n      ),\r\n      body: Center(\r\n        child: Text('Hello, world!'),\r\n      ),\r\n    );\r\n  }\r\n}\r\n<\/code><\/pre>\n\n\n\n
Key Components of a Drawer<\/p>\n\n\n\n
Key Components of a Drawer<\/strong><\/p>\n\n\n\n
    \n
  • Drawer<\/code><\/strong>: The main widget that represents the drawer.<\/li>\n<\/ul>\n\n\n\n
      \n
    • DrawerHeader<\/code><\/strong>: A header widget that can be placed at the top of the drawer.<\/li>\n\n\n\n
    • ListView<\/code><\/strong>: A scrollable list of items inside the drawer.<\/li>\n\n\n\n
    • ListTile<\/code><\/strong>: A widget that represents a single item in the list. It can have an icon, title, and an onTap<\/code> callback.<\/li>\n<\/ul>\n\n\n\n
      Example Explained<\/strong><\/p>\n\n\n\n
        \n
      • AppBar<\/strong>: Contains a title and optionally a menu icon to open the drawer.<\/li>\n\n\n\n
      • Drawer<\/strong>: Contains a ListView<\/code> that holds a DrawerHeader<\/code> and several ListTile<\/code> widgets.<\/li>\n\n\n\n
      • DrawerHeader<\/strong>: Displays a header at the top of the drawer.<\/li>\n\n\n\n
      • ListTile<\/strong>: Represents individual items in the drawer. Each ListTile<\/code> can have an icon, title, and an onTap<\/code> event that can be used to handle navigation or other actions.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"
        In Flutter, a Drawer is a sliding panel that typically contains a list of items. It is used for navigation<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-851","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/851","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/comments?post=851"}],"version-history":[{"count":1,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/851\/revisions"}],"predecessor-version":[{"id":852,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/851\/revisions\/852"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=851"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=851"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=851"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}