{"id":10642,"date":"2021-10-08T10:00:00","date_gmt":"2021-10-08T01:00:00","guid":{"rendered":"https:\/\/www.gigas-jp.com\/appnews\/?p=10642"},"modified":"2021-10-07T19:56:16","modified_gmt":"2021-10-07T10:56:16","slug":"flutter-navigation-drawer","status":"publish","type":"post","link":"https:\/\/www.gigas-jp.com\/appnews\/archives\/10642","title":{"rendered":"Flutter – Navigation drawer"},"content":{"rendered":"\n

Output<\/strong>:<\/p>\n\n\n\n

\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n\n\n\n

This week I would like to share about navigation drawer from Drawer widget. We can create navigation drawer by calling the constructor of the drawer class. Drawer widgets show us navigation drawer that slides to horizontally from edge fo the screen. <\/p>\n\n\n\n

When we tap app bar, it will display the drawer. In this article we will create DrawerSection and eight navigation links. The links Dashboard<\/strong>, Contacts<\/strong>, Events<\/strong>, Notes<\/strong>, Settings<\/strong>, Notifications<\/strong>, Privacy policy <\/strong>and Send feedback<\/strong> are created using Column widget. Let\u2019s design the drawer part first. I am creating drawer widget named MyDrawerList<\/strong>. And I am creating other drawer in a separate file so that we can reuse it in other pages.<\/p>\n\n\n\n

Basic implementation of navigation drawer:<\/p>\n\n\n\n

MyDrawerList(\n        child:Column(\n\n         children: [\n             menuItem(1, \"Dashboard\", Icons.dashboard_outlined,\n              currentPage == DrawerSections.dashboard ? true : false),\n             \n              menuItem(2, \"Contacts\", Icons.people_alt_outlined,\n              currentPage == DrawerSections.contacts ? true : false),\netc..\n\n          ],\n        ) ,\n   ),<\/code><\/pre>\n\n\n\n
At first dashboard page is wanted to see, we can assign currentPage<\/strong> to DrawerSection.dashboard<\/strong>.<\/p>\n\n\n\n
var currentPage = DrawerSections.dashboard;<\/code><\/pre>\n\n\n\n
To display a navigation drawer we have to provide Drawer<\/strong> widget to scaffold\u2019s drawer property.<\/p>\n\n\n\n
Scaffold(\n      appBar: AppBar(\n        backgroundColor: Colors.green[700],\n        title: const Text(\"Navigation drawer\"),\n      ),\n      body: container,\n      drawer: Drawer(\n        child: SingleChildScrollView(\n          child: Column(\n            children: [\n              const MyHeaderDrawer(),\n              MyDrawerList(),\n            ],\n          ),\n        ),\n      ),\n    );<\/code><\/pre>\n\n\n\n
If you want to navigate to another route first we have to dismiss the drawer by using below line of code<\/p>\n\n\n\n
 Navigator.pop(context);<\/code><\/pre>\n\n\n\n
Now we have to navigate to another route using menuItem<\/strong> like below, in above we assign current page to dashboard page and menuItem widget is called in MyDrawerList<\/strong> widget. <\/p>\n\n\n\n
Widget menuItem(int id, String title, IconData icon, bool selected) {\n    return Material(\n      color: selected ? Colors.grey[300] : Colors.transparent,\n      child: InkWell(\n        onTap: () {\n          Navigator.pop(context);\n          setState(() {\n            if (id == 1) {\n              currentPage = DrawerSections.dashboard;\n            }\n        }\netc..\n}\n<\/code><\/pre>\n\n\n\n
Hope you enjoyed this post.<\/p>\n\n\n\n
By Ami<\/p>\n
\n            
<\/g:plusone><\/div>\n            
 \"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"<\/a>