Create Navigation Drawer In Flutter

Navigation drawer is a UI panel which shows your app's main navigation menu. The navigation drawer appears when the user touches the interface icon in the app bar or when the user swipes a finger from the left edge on the screen. The navigation drawer slides show from the left and contain the navigation destinations for your app. You can see a complete description of navigation drawer Here. Before that we have been discussing about Face Detection In Flutter With MLKit And Firebase. Now, we will discuss how to create a navigation drawer in Flutter. Let's practice creating a menu drawer in flutter.
 
First, we must create new a project using Visual Studio Code software. Here's how to create a new project using Visual Studio Code:
  • Invoke View > Command Palette.
  • Type “flutter”, and select the Flutter: New Project.
  • Enter a project name, such as myapp, and press Enter.
  • Create or select the parent directory for the new project folder.
  • Wait for project progress creation to complete and the main.dart file to appear.
  • Add new folder path like this [projectname]/assets.
Edit file pubspec.yaml in your directory and it should look something like the below:
  1. name: navigation_drawer  
  2. description: A new Flutter project.  
  3.   
  4. # The following defines the version and build number for your application.  
  5. # A version number is three numbers separated by dots, like 1.2.43  
  6. # followed by an optional build number separated by a +.  
  7. # Both the version and the builder number may be overridden in flutter  
  8. # build by specifying --build-name and --build-number, respectively.  
  9. # In Android, build-name is used as versionName while build-number used as versionCode.  
  10. # Read more about Android versioning at https://developer.android.com/studio/publish/versioning  
  11. # In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.  
  12. # Read more about iOS versioning at  
  13. # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html  
  14. version: 1.0.0+1  
  15.   
  16. environment:  
  17.   sdk: ">=2.1.0 <3.0.0"  
  18.   
  19. dependencies:  
  20.   flutter:  
  21.     sdk: flutter  
  22.   
  23.   # The following adds the Cupertino Icons font to your application.  
  24.   # Use with the CupertinoIcons class for iOS style icons.  
  25.   cupertino_icons: ^0.1.2  
  26.   
  27. dev_dependencies:  
  28.   flutter_test:  
  29.     sdk: flutter  
  30.   
  31.   
  32. # For information on the generic Dart part of this file, see the  
  33. # following page: https://www.dartlang.org/tools/pub/pubspec  
  34.   
  35. # The following section is specific to Flutter.  
  36. flutter:  
  37.   
  38.   # The following line ensures that the Material Icons font is  
  39.   # included with your application, so that you can use the icons in  
  40.   # the material Icons class.  
  41.   uses-material-design: true  
  42.   
  43.   # To add assets to your application, add an assets section, like this:  
  44.   assets:  
  45.   - assets/camellab.png  
  46.   #  - images/a_dot_burr.jpeg  
  47.   #  - images/a_dot_ham.jpeg  
  48.   
  49.   # An image asset can refer to one or more resolution-specific "variants", see  
  50.   # https://flutter.io/assets-and-images/#resolution-aware.  
  51.   
  52.   # For details regarding adding assets from package dependencies, see  
  53.   # https://flutter.io/assets-and-images/#from-packages  
  54.   
  55.   # To add custom fonts to your application, add a fonts section here,  
  56.   # in this "flutter" section. Each entry in this list should have a  
  57.   # "family" key with the font family name, and a "fonts" key with a  
  58.   # list giving the asset and other descriptors for the font. For  
  59.   # example:  
  60.   # fonts:  
  61.   #   - family: Schyler  
  62.   #     fonts:  
  63.   #       - asset: fonts/Schyler-Regular.ttf  
  64.   #       - asset: fonts/Schyler-Italic.ttf  
  65.   #         style: italic  
  66.   #   - family: Trajan Pro  
  67.   #     fonts:  
  68.   #       - asset: fonts/TrajanPro.ttf  
  69.   #       - asset: fonts/TrajanPro_Bold.ttf  
  70.   #         weight: 700  
  71.   #  
  72.   # For details regarding fonts from package dependencies,  
  73.   # see https://flutter.io/custom-fonts/#from-packages 

Modify file main.dart to completed like below,
  1. import 'package:flutter/material.dart';  
  2.   
  3. void main() => runApp(MyApp());  
  4.   
  5. class MyApp extends StatelessWidget {  
  6.   final appTitle = 'Camellabs Demo';  
  7.   
  8.   @override  
  9.   Widget build(BuildContext context) {  
  10.     return MaterialApp(  
  11.       title: appTitle,  
  12.       home: MyHomePage(title: appTitle),  
  13.     );  
  14.   }  
  15. }  
  16.   
  17. class MyHomePage extends StatelessWidget {  
  18.   final String title;  
  19.   
  20.   MyHomePage({Key key, this.title}) : super(key: key);  
  21.   
  22.   @override  
  23.   Widget build(BuildContext context) {  
  24.     return Scaffold(  
  25.       appBar: AppBar(title: Text(title)),  
  26.       body: Center(child: Text('My Page!')),  
  27.       drawer: Drawer(  
  28.         // Add a ListView to the drawer. This ensures the user can scroll  
  29.         // through the options in the Drawer if there isn't enough vertical  
  30.         // space to fit everything.  
  31.         child: ListView(  
  32.           // Important: Remove any padding from the ListView.  
  33.           padding: EdgeInsets.zero,  
  34.           children: <Widget>[  
  35.             DrawerHeader(  
  36.               child: Text(  
  37.                 'Drawer Header',  
  38.                 style: TextStyle(color: Colors.white, fontSize: 22),),  
  39.               decoration: BoxDecoration(  
  40.                 color: Colors.lightBlue[300],  
  41.               ),  
  42.             ),  
  43.             ListTile(  
  44.               title: Text('Menu 1', style: TextStyle(color: Colors.deepOrange),),  
  45.               onTap: () {  
  46.                 // Update the state of the app  
  47.                 // ...  
  48.                 // Then close the drawer  
  49.                 Navigator.push(  
  50.                   context,  
  51.                   MaterialPageRoute(builder: (context) => Menu1Page()),  
  52.                 );  
  53.               },  
  54.             ),  
  55.             ListTile(  
  56.               title: Text('Menu 2', style: TextStyle(color: Colors.deepOrange),),  
  57.               onTap: () {  
  58.                 // Update the state of the app  
  59.                 // ...  
  60.                 // Then close the drawer  
  61.                 Navigator.push(  
  62.                   context,  
  63.                   MaterialPageRoute(builder: (context) => Menu2Page()),  
  64.                 );  
  65.               },  
  66.             ),  
  67.           ],  
  68.         ),  
  69.       ),  
  70.     );  
  71.   }  
  72. }  
  73.   
  74. class Menu1Page extends StatelessWidget {  
  75.   @override  
  76.   Widget build(BuildContext context) {  
  77.     return Scaffold(  
  78.       appBar: AppBar(  
  79.         title: Text("Menu 1 Page"),  
  80.       ),  
  81.       body: Center(  
  82.         child: RaisedButton(  
  83.           onPressed: () {  
  84.             Navigator.pop(context);  
  85.           },  
  86.           child: Text('Go back!'),  
  87.         ),  
  88.       ),  
  89.     );  
  90.   }  
  91. }  
  92.   
  93. class Menu2Page extends StatelessWidget {  
  94.   @override  
  95.   Widget build(BuildContext context) {  
  96.     return Scaffold(  
  97.       appBar: AppBar(  
  98.         title: Text("Menu 2 Page"),  
  99.       ),  
  100.       body: Center(  
  101.         child: RaisedButton(  
  102.           onPressed: () {  
  103.             Navigator.pop(context);  
  104.           },  
  105.           child: Text('Go back!'),  
  106.         ),  
  107.       ),  
  108.     );  
  109.   }  


After you have finished copying  the main.dart code, running the application will show the below output:
 
Create Navigation Drawer In Flutter
 
You can see a navigation drawer in Flutter example  Here.
 
Thank you for reading this article about creating navigation drawer in Flutter, I hope this article is useful for you. Visit My Github about Flutter Here.


Similar Articles