{"id":2067,"date":"2022-04-07T14:40:26","date_gmt":"2022-04-07T14:40:26","guid":{"rendered":"https:\/\/mdr.foobrdigital.com\/?p=2067"},"modified":"2022-04-07T14:40:26","modified_gmt":"2022-04-07T14:40:26","slug":"drawer","status":"publish","type":"post","link":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/2022\/04\/07\/drawer\/","title":{"rendered":"Drawer"},"content":{"rendered":"\n<p>It is a\u00a0<strong>slider panel<\/strong>\u00a0that is displayed at the side of the body. Usually, it is hidden on the mobile devices, but the user can swipe it left to right or right to left to access the drawer menu. It uses the\u00a0<strong>Drawer widget properties<\/strong>\u00a0slides in a\u00a0<strong>horizontal direction<\/strong>\u00a0from the Scaffold edge to show navigation links in the application. An appropriate\u00a0<strong>icon<\/strong>\u00a0for the drawer is set automatically in an appBar property. The\u00a0<strong>gesture<\/strong>\u00a0is also set automatically to open the drawer. See the following code.<a href=\"https:\/\/www.javatpoint.com\/flutter-scaffold#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-scaffold#\"><\/a><a href=\"https:\/\/www.javatpoint.com\/flutter-scaffold#\"><\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>drawer: Drawer(   \n        child: ListView(   \n        children: const &lt;Widget>&#91;   \n        DrawerHeader(   \n            decoration: BoxDecoration(   \n            color: Colors.red,   \n            ),   \n            child: Text(   \n            'Welcome to Javatpoint',   \n            style: TextStyle(   \n                color: Colors.green,   \n                fontSize: 30,   \n            ),   \n              ),   \n        ),   \n        ListTile(   \n            title: Text('1'),   \n        ),   \n        ListTile(  \n            title: new Text(\"All Mail Inboxes\"),  \n            leading: new Icon(Icons.mail),  \n        ),  \n        Divider(  \n            height: 0.2,  \n        ),  \n        ListTile(  \n            title: new Text(\"Primary\"),  \n        ),  \n        ListTile(  \n            title: new Text(\"Social\"),  \n        ),  \n        ListTile(  \n            title: new Text(\"Promotions\"),  \n        ),   \n        ],   \n         ),   \n  ), <\/code><\/pre>\n\n\n\n<p>In the above code, we use the drawer property of Scaffold for creating a drawer. We have also used some other widgets to make it attractive. In the&nbsp;<strong>ListView<\/strong>&nbsp;widget, we have divided the panel into two parts,&nbsp;<strong>Header<\/strong>&nbsp;and&nbsp;<strong>Menu<\/strong>. The DrawerHeader property modifies the panel header that also contains an icon or details according to the application. Again, we have used&nbsp;<strong>ListTile<\/strong>&nbsp;to add the list items in the menu.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It is a\u00a0slider panel\u00a0that is displayed at the side of the body. Usually, it is hidden on the mobile devices, but the user can swipe it left to right or right to left to access the drawer menu. It uses the\u00a0Drawer widget properties\u00a0slides in a\u00a0horizontal direction\u00a0from the Scaffold edge to show navigation links in the [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[305],"tags":[],"_links":{"self":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2067"}],"collection":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/comments?post=2067"}],"version-history":[{"count":0,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/posts\/2067\/revisions"}],"wp:attachment":[{"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/media?parent=2067"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/categories?post=2067"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mudassirbackup.infinitycodestudio.com\/index.php\/wp-json\/wp\/v2\/tags?post=2067"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}